jQuery LazyLoad ne charge pas les images avant de faire défiler

jQuery LazyLoad ne charge pas les images dans la page ouverte de la partie visible jusqu'à ce que je défilement de la page, même sur 1px.

Quand j'ai faites défiler la page toutes les œuvres de droite

mise à Jour:

CoffeScript

jQuery ->
   $("img.lazy").show().lazyload()
   $(window).resize()

Mais $(window).resize() permet uniquement si j'y accéder à partir du navigateur de la console lors de la page ont chargé

source d'informationauteur Alexey | 2012-12-20

  1. 3

    Vos images doivent avoir la largeur et la hauteur de l'ensemble.

  2. 21
    $("img.lazy").lazyload({
             threshold : 50
         });

    Et ajouter ceci:

    $(window).load(function(){
     $("html,body").trigger("scroll");
});
  3. 3

    De l'essayer....

    $(function() {
    $("img.lazy").show().lazyload()
    window.onload = function() {
        $(window).resize()
    };
});
  4. 2

    La version actuelle de Lazyload déclenche la mise à jour initial sur la fenêtre de l'événement load. Donc, si vous chargez des images dynamiquement plus tard - vous besoin d'un autre événement comme un de défilement pour déclencher un cycle de mise à jour. C'était mon problème avec les images montrant une fois de défilement.

  5. 2

    C'est ce qui a résolu ce problème pour moi:

    $("html,body").on('scroll', function(){ 
    $(window).resize() 
});

    Son vraiment simple, c'est juste une fenêtre.redimensionner sur le défilement de l'événement de corps et de balises html. bam.

  6. 0

    - Je obtenir mes images à travers une $.post() requête à chaque fois que je filtre par certaines choses, donc j'ai besoin de toute la chose à exécuter à chaque rechargement

    $.post( "queries.php", { var1:var1, var2:var2, .. }, function(response){
  for( var i=0; i<response.length; i++ ) { $("#container").append(response[i]); }
  $("img.lazy").lazyload();
  $(window).resize();
}, "json");
  7. 0

    Lors de l'initialisation de lazyload vous pouvez le dire de l'événement(s) déclencheur (par défaut la valeur est de défilement). Je vous suggère d'ajouter un événement personnalisé à cette liste et de déclenchement à chaque fois que cela a du sens pour vous:

    $('.lazy').lazyload({
    event: 'scroll whenever-i-want'
});

//whenever you want to trigger your event (after ajax load, on dom ready, etc...)
$(document).trigger('whenever-i-want');

    Ce qui laisse le défilement par défaut de la fonctionnalité, mais vous permet également de déclencher le chargement différé sur demande.

  8. 0

    Comme trouvé dans ce DONC, la question , réglage skip_invisible de faux résolu le problème pour moi

  9. 0
    $(document).ready(function () {
$("img.lazy").lazyload({
<br/>placeholder: rooturl + "Themes/images/imgloading.gif",<br/>
                 effect: "fadeIn",<br/>
                 skip_invisible: false<br/>
                 });<br/>
        });<br/>

$(document).ready(function() {<br/>
       $(window).load(function() {<br/>
             update();<br/>
         }); <br/>
  });<br/>

    Utiliser cette lazy load script https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130

  10. 0

    Pour les curseurs d'avoir plusieurs images commandé par le z-index, le lazyload option failure_limit viendra dans maniable.

    Plus de détails sur cette option est ici