Che cosa è un modo migliore per il contenuto del carico pigri per gli utenti con JavaScript?

StackOverflow https://stackoverflow.com/questions/4786985

Domanda

Ho una pagina che ha un sacco di immagini e altro codice che potrebbe funzionare meglio se è pigro caricato.

Sono stato tentato di farlo con il tag noscript ma ho appena notato che non funziona correttamente in IE. Funziona in ogni altro browser che ho provato (ff, Opera, Chrome, Safari, ecc) e quindi sono un po 'frustrato.

Sono abbastanza sicuro che ad un certo punto o in un altro in realtà ho avuto questo lavoro in IE perché sono stato con la tecnica per un po 'e ho test di IE abbastanza frequentemente ... ma non è ora di lavoro e tutto ciò che google sembra suggerire che non ha mai funzionato.

Ecco un semplice esempio per copiare e incollare che mostra ciò che stavo cercando: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>lazy load with noscript</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>  
 </head>
 <body>

  <noscript>
   <div>
    <p>other content here</p>
    <img src="http://www.google.com/images/logos/ps_logo.png" alt="lazy loading image test" />
   </div>
  </noscript>

  <noscript>
   <div>
    <p>other content here 2</p>
    <img src="http://www.google.com/images/logos/ps_logo2.png" alt="lazy loading image test 2" />
   </div>
  </noscript>

  <script type="text/javascript">
   var html = $("noscript:first").text();
   alert(html);
   $("body").append(html);
  </script>

 </body>
</html>

Il HTML utilizzato per gli utenti con javascript e senza javascript è lo stesso. Mi basta usare jQuery alla scheda il contenuto per renderlo più facile da visualizzare. Dal momento che il contenuto è a schede in JavaScript ha bisogno di carico pigri quando una scheda si apre in modo che non ci vuole molto tempo per scaricare inizialmente quando la pagina ha allegati di considerevoli dimensioni.

Come posso raggiungere questo obiettivo senza emettere il html più di una volta?

È stato utile?

Soluzione

Quello che dovete fare è di avere tutte le immagini puntare a una gif pixel (o png). Scrivi uno script che controlla se un utente ha fatto scorrere nei pressi di un'immagine, e quindi utilizzare Javascript per scambiare il pixel con l'immagine completa.

In script che ho scritto, si avrebbe un tag di immagine che appare come: 

<img src="pixel.gif" data-img="path-to-full-img.jpg" />

In alternativa, è possibile utilizzare un plugin come questo . Nota:. Non ho usato questo plugin prima, ma sembra che sia tutto ciò che serve

Se davvero voleva ottenere hardcore, si potrebbe LazyLoad Javascript usando qualcosa come h ead.js o control.js

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top