Chargement de l'image en utilisant Lazy Load

Question

J'ai utilisé http://www.appelsiini.net/projects/lazyload cette extension pour charger les images.

Cela fonctionne très bien lorsque je fais défiler vers le bas les images de la page sont en cours de chargement, mais j'ai besoin d'afficher les images de première ligne lorsque la page est chargée.

Comment est-ce que je peux faire ceci?

Answer 1

Par défaut, les images sont chargées lorsqu'elles apparaissent à l'écran. Si vous souhaitez charger les images plus tôt, vous pouvez définir le paramètre de seuil. Si vous définissez le seuil sur 200, l'image est chargée 200 pixels avant d'être visible.

$("img.lazy").lazyload({ threshold : 200 }); 

Donc dans votre cas, dans quelle mesure est la première ligne vers le bas la page?

$(function() { 
    var $firstRow = $('table:first tr:first'), 
    threshold = $firstRow.offset().top + $firstRow.height(); 
    $("img.lazy").lazyload({ threshold : threshold }); 
}); 

ou quelque chose comme ça.

Answer 2

dans le site Web en cours d'exécution page de démonstration, est afficher première ligne avec la page est la charge voir cette DEMO

$(function() { 
      $("img").lazyload({ 
       effect : "fadeIn", 
       /* 
       appear : function(elements_left, settings) { 
        console.log("appear"); 
        console.log(elements_left); 
        //console.log(this, elements_left, settings); 
       }, 
       load : function(elements_left, settings) { 
        console.log("load"); 
        console.log(elements_left); 
        //console.log(this, elements_left, settings); 
       } 
       */ 
      }); 
     });​ 

Answer 3

Vos images manquent d'attributs largeur et la hauteur. La charge paresseuse ne fonctionnera pas correctement sans eux. Sans connaître la largeur et la hauteur navigateur ne peut pas savoir où les images sont censées être dans la mise en page lorsque document.ready déclenche des incendies. Une balise d'image correcte ressemble à quelque chose comme:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">