Troppi script = pagina lenta

**donatocalabrese** · 01-07-2014, 03:44

Ciao a tutti,
premetto di essere neofita, totalmente autodidatta e alquanto incapace

Sto provando a realizzare questa pagina:

http://t-a-x-i.it/taxi3/sito3.html

Al momento:
- ho 3 script praticamente identici per aprire 3 overlay.
- appena si entra nella home, la pagina si carica tutta (overlay compresi, anche se non visibili).
Questi due fattori rallentano molto la navigazione e la godibilità del sito.

Ho quindi due domande:

1 è possibile utilizzare un solo script che gestisca i vari overlay?
2 è possibile fare in modo che gli iframe contenuti all'interno degli overlay vengano caricati solo al momento del click?

Sono a disposizione per qualsiasi integrazione sia necessaria per farvi capire meglio la questione.
Vi ringrazio in anticipo per le risposte.

Donato

**cavicchiandrea** · 01-07-2014, 07:16

Originariamente inviata da donatocalabrese

Ho quindi due domande:

1 è possibile utilizzare un solo script che gestisca i vari overlay?
2 è possibile fare in modo che gli iframe contenuti all'interno degli overlay vengano caricati solo al momento del click?

1 di noma è così ad esempio lightbox uno dei più famosi lo fa, non conoscendo lo script impossibile essere più precisi
2 si usando Ajax

Visitando il sito con a iPad e con connessione fastweb fibra non mi sembra lentissimo

**donatocalabrese** · 01-07-2014, 12:56

Innanzitutto grazie per la risposta.

Per quanto riguarda lo script ti allego il codice html della pagina dove si può vedere lo script che uso per aprire gli overlay. Secondo me sicuramente ci sarà il modo di racchiudere i 3 script in un unico script che gestisce varie "aperture"

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>T-A-X-I</title>

<link rel="stylesheet" href="http://t-a-x-i.it/taxi3/css/style.css?" />
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>


<script src="//code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

<script>
$(document).ready(function() {

    $(".apri").click(
        function(){
            $('#overlay').fadeIn('fast');
            $('#box').fadeIn('slow');
        });
        
        $(".chiudi").click(
        function(){
        $('#overlay').fadeOut('fast');
        $('#box').hide();
        });
        
        //chiusura emergenza 
        $("#overlay").click(
        function(){
        $(this).fadeOut('fast');
        $('#box').hide();
        });
        
    
        
   });     
        
 </script>

<script>
$(document).ready(function() {

    $(".apri1").click(
        function(){
            $('#overlay1').fadeIn('fast');
            $('#box1').fadeIn('slow');
        });
        
        $(".chiudi1").click(
        function(){
        $('#overlay1').fadeOut('fast');
        $('#box1').hide();
        });
        
        //chiusura emergenza 
        $("#overlay1").click(
        function(){
        $(this).fadeOut('fast');
        $('#box1').hide();
        });
        
    
        
   });     
        
 </script>
 
 <script>
$(document).ready(function() {

    $(".apri2").click(
        function(){
            $('#overlay2').fadeIn('fast');
            $('#box2').fadeIn('slow');
        });
        
        $(".chiudi2").click(
        function(){
        $('#overlay2').fadeOut('fast');
        $('#box2').hide();
        });
        
        //chiusura emergenza 
        $("#overlay2").click(
        function(){
        $(this).fadeOut('fast');
        $('#box2').hide();
        });
        
    
        
   });     
        
 </script>



 <script>
$(document).ready(function() {

    $(".apri3").click(
        function(){
            $('#overlay3').fadeIn('fast');
            $('#box3').fadeIn('slow');
        });
        
        $(".chiudi3").click(
        function(){
        $('#overlay3').fadeOut('fast');
        $('#box2').hide();
        });
        
        //chiusura emergenza 
        $("#overlay3").click(
        function(){
        $(this).fadeOut('fast');
        $('#box3').hide();
        });
        
    
        
   });     
        
 </script>



</head>

<body>

<!-- segui la pagina FACEBOOK -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FWWW.TAXI.IT&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe> 

<!-- LOGO -->
<div align="left" style="position:absolute; width:250px; padding-top:80px; padding-left:60px;">
<img src="http://t-a-x-i.it/logo_taxi.jpg">
</div> 


<!--Overlay non toccare!-->
<div class="overlay1" id="overlay1" style="display:none;"></div>
<div id="box1">
            <iframe src="http://www.ultimouomo.com/analisi-mond-bra-cil/" ></iframe>
</div>

<div class="overlay2" id="overlay2" style="display:none;"></div>
<div id="box2"> 
            <iframe src="http://www.ultimouomo.com/cosa-abbiamo-imparato/" ></iframe>
</div>

<div class="overlay3" id="overlay3" style="display:none;"></div>
<div id="box3"> 
            <iframe src="http://www.ultimouomo.com/quinto-mondo-3/" ></iframe>
</div>


<!-- NEWS -->
<div class="split2" align="center">
<div>
<p class="apri1">
NEWS 5<br>Lorem ipsum dolor sit amet, consectetur adipisci elit,<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</p>
</div>
<div>
<p class="apri2">
NEWS 4<br>Lorem ipsum dolor sit amet, consectetur adipisci elit,<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</p>
</div>
<div>
<p class="apri3">
NEWS 3<br>Lorem ipsum dolor sit amet, consectetur adipisci elit,<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</p>
</div>
<div>
<p>
NEWS 2<br>Lorem ipsum dolor sit amet, consectetur adipisci elit,<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</p>
</div>
<div>
<p>
NEWS 1<br>Lorem ipsum dolor sit amet, consectetur adipisci elit,<br>sed eiusmod tempor incidunt ut labore et dolore magna aliqua.
</p>
</div>
</div>

</body>
</html>

Per quanto riguarda invece la richiesta al punto 2

donatocalabrese: 2 è possibile fare in modo che gli iframe contenuti all'interno degli overlay vengano caricati solo al momento del click?

cavicchiandrea: 2 si usando Ajax

Riusciresti a darmi un'indicazione su come potrebbe chiamarsi questo comando? Come ti dicevo sono autodidatta-neofita-incapace vorrei cercarmi qualche tutorial/informazione: come potrebbe chiamarsi una funzione del genere?

Grazie mille per le risposte.

**cavicchiandrea** · 01-07-2014, 13:24

Vedi su google "overlay ajax jquery"

**donatocalabrese** · 01-07-2014, 19:57

Grazie per la irsposta.

invece per quanto riguarda gli script.

Posso unirli in uno unico invece di ripeterlo 3 volte?

Se si come si può fare?

Ho visto la funzione [rel] ma non sono sicuro si possa usare in questo caso.

In pratica vorrei uno script unico che gestisca l'overlay, senza avere overlay1, 2 3, ... / box 1,2,3.... /apri1,2,3 / chiudi 1,2,3,

cioè vorrei poter dire che overlay può avere valore 1,2,3... apri può avere valore 1,2,3.... eccetera.

E' possibile fare questa cosa quì?

Grazie

**cavicchiandrea** · 01-07-2014, 22:54

Ho preferito fartelo che spiegartelo http://webandylab.altervista.org/newsajax.html (il codice jquery è commentato)

**donatocalabrese** · 02-07-2014, 00:19

Che dire?

Grazie mille!!!

**donatocalabrese** · 02-07-2014, 12:35

Sembra perfetto, adesso me lo studio un po' grazie mille.

Ho notato un piccolo problema.

Quando apro un overlay rimangono comunque "cliccabili" i box delle news: è possibile impedire questa cosa?

**cavicchiandrea** · 02-07-2014, 13:27

Si un po contorto come lavoro e non vedo il motivo visto che rimangono sotto alla overlay

Discussione: Troppi script = pagina lenta

Strumenti discussione

Ricerca discussione

Visualizza

Troppi script = pagina lenta

Tag per questa discussione

Permessi di invio