Was ist ein besserer Weg, um Inhalte für Benutzer mit JavaScript zu faulen?

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

Frage

Ich habe eine Seite mit vielen Bildern und anderen Code, die besser funktionieren würden, wenn sie faul geladen sind.

Ich habe versucht, dies mit dem Noscript -Tag zu tun, aber ich habe gerade bemerkt, dass es in IE nicht richtig funktioniert. Es funktioniert in jedem anderen Browser, den ich getestet habe (FF, Opera, Chrome, Safari usw.), also bin ich ein wenig frustriert.

Ich bin mir ziemlich sicher, dass ich an der einen oder anderen Stelle tatsächlich in IE gearbeitet habe dass es nie funktioniert hat.

Hier ist ein einfaches Beispiel zum Kopieren und Einfügen, das zeigt, was ich versucht habe:

<!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>

Die HTML, die für Benutzer mit JavaScript und ohne JavaScript verwendet wird, ist gleich. Ich verwende nur JQuery, um den Inhalt zu tätigen, um die Anzeige zu erleichtern. Da der Inhalt in JavaScript tabben wird, muss er faul geladen werden, wenn eine Registerkarte geöffnet wird, sodass es nicht dauert, bis die Seite anfänglich heruntergeladen wird, wenn die Seite beträchtliche Anhänge enthält.

Wie kann ich das erreichen, ohne die HTML mehr als einmal auszugeben?

War es hilfreich?

Lösung

Sie müssen alle Bilder auf ein Pixel -GIF (oder PNG) zeigen. Schreiben Sie ein Skript, das überprüft, ob ein Benutzer in der Nähe eines Bildes gescrollt ist, und verwenden Sie dann JavaScript, um das Pixel mit dem vollständigen Bild auszutauschen.

In Skripten, die ich geschrieben habe, hätten Sie ein Bild -Tag, das aussieht:

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

Alternativ können Sie a verwenden Plugin so. Hinweis: Ich habe dieses Plugin noch nicht verwendet, aber es sieht so aus, als ob es alles ist, was Sie brauchen.

Wenn Sie wirklich Hardcore bekommen wollten, können Sie Ihr JavaScript mit etwas wie h ladenead.js oder control.js

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top