Quelle est la meilleure façon de charger le contenu paresseux pour les utilisateurs avec javascript?

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

Question

J'ai une page qui a beaucoup d'images et autres codes qui permettraient de mieux fonctionner si elle est paresseux chargé.

J'ai tenté de le faire avec la balise noscript mais je viens de remarquer qu'il ne fonctionne pas correctement dans IE. Il fonctionne dans tous les autres navigateurs je l'ai testé (ff, opéra, chrome, safari, etc.) donc je suis un peu frustré.

Je suis assez sûr à un moment ou un autre j'avais fait ce travail dans IE parce que je suis en utilisant la technique un peu de temps et je IE essai assez souvent ... mais il ne fonctionne pas maintenant et tout ce que je google semble indiquer qu'il n'a jamais travaillé.

Voici un exemple simple de copier et coller qui montre ce que je tentais: 

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

Le code HTML utilisé pour les utilisateurs avec javascript et sans javascript est le même. Je viens d'utiliser jquery à l'onglet contenu pour le rendre plus facile à la vue. Étant donné que le contenu est en javascript par onglets, il a besoin de charger paresseux quand un onglet ouvre donc il ne prend pas l'âge de télécharger d'abord lorsque la page comporte des pièces jointes de taille.

Comment puis-je obtenir cela sans sortir le code html plus d'une fois?

Était-ce utile?

La solution

Ce que vous devez faire est d'avoir toutes les images pointer vers un gif de pixel (ou png). Ecrire un script qui vérifie si un utilisateur a une image près de défiler, puis utiliser Javascript pour échanger le pixel avec l'image complète.

Dans les scripts que j'ai écrit, vous auriez une balise d'image qui ressemble à: 

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

Alternativement, vous pouvez utiliser un plugin comme celui-ci . Note:. Je n'ai pas utilisé ce plugin avant, mais il semble que c'est tout ce que vous avez besoin

Si vous voulez vraiment obtenir hardcore, vous pouvez lazyload votre javascript en utilisant quelque chose comme ead.js ou control.js

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top