Lazy Load ne se charge pas les images visibles

Je pense que cela pourrait être une mauvaise conduite de threshold paramètre, mais encore, vous pouvez manuellement feu le chargement en fonction cette page:

<script type="text/javascript">
  $(document).ready(function () {
      $("img")
         .lazyload({
             event: "lazyload",
             effect: "fadeIn",
             effectspeed: 2000
           })
         .trigger("lazyload");
  });
</script>

mais si vous voulez charger toutes les images sur ready, pourquoi faut-il lazyload à tous? Vous pouvez simplement utiliser $.animate.

OriginalL'auteur pozs

Vous devez définir la largeur et la hauteur des images.

Si la largeur et la hauteur ne sont pas mis en jQuery fera rapport des images invisibles dans les navigateurs Webkit sur le document.la charge de l'événement. Lorsque skip_invisible est true Lazy Load va ignorer les images, le sens qu'il l'habitude d'essayer de comprendre si l'image doit être chargée ou pas. Ils vont se charger de la première fois que vous faites défiler.

Si vous définissez skip_invisible est false plugin va essayer de comprendre si les images seront chargées. Cependant, puisque vous n'avez pas la largeur et la hauteur de l'ensemble de toutes les images seront de la taille de 0x0 ou 1x1. De ce fait toutes les images sont dans la fenêtre d'affichage (en raison de leur taille) lorsque le plugin est activé. Parce que les images sont dans la fenêtre d'affichage Paresseux Charge d'instruire à charge de tous les.

En bref: Ajouter la largeur et la hauteur des images. Lazy Load ne fonctionnent pas correctement sans eux.

OriginalL'auteur Mika Tuupola

J'ai eu le même problème. Ils sont dans une div défilement, mais seulement de la charge après une période initiale de défilement.

À l'aide de 'apparaissent' montrera tous, à moins d'en limiter la portée. Dans mon cas, je ne voulais montrer les 3 premiers de la charge. Le reste de leur charge paresseux comme d'habitude.

$("img.lazy:lt(3)").trigger('appear');

OriginalL'auteur Skäggiga Mannen

J'ai eu le même problème et trouvé une solution pour ce.
Veuillez noter que mes images étaient placés à l'intérieur d'un div qui est rempli par un appel ajax.

Il suffit de changer une ligne de code à l'intérieur de la lazyload sources (lignes 147-150) de la version 1.8.4:

/* Force initial check if images should appear. */
        $(document).ready(function() {
            update();
        });

au lieu de

/* Force initial check if images should appear. */
        $(window).load(function() {
            update();
 });

Ou éventuellement ajouter l'appel à la "update()" pour tout autre besoin événement.

OriginalL'auteur Gabriele Pala

J'ai eu le même problème avec les éléments cachés, est une solution simple, mais il fonctionne. Quand je clique sur la page, je déclenchement de défilement de l'événement de force lazyload script. Vous pouvez faire la même chose avec l'événement de redimensionnement

$(document).ready(function () {
    $("img").lazyload({
        event: "lazyload",
        effect: "fadeIn",
        effectspeed: 2000
    });
    $(window).resize(function () {
        $(this).trigger("scroll");
    }); 
});

OriginalL'auteur Alessandro Romeo

C'est la solution de travail, mais n'est pas très bon pour certaines raisons:

$("img").lazyload({
    /* Image loaded callback function */
    load: function() {
        $(window).trigger('scroll');
    }
});

Chaque fois lazyload plugin charger l'image, cette fonction sera appelée et de la fenêtre de déclenchement de défilement sera imité, c'est donc la solution pour moi

OriginalL'auteur AlexxKur

J'avais le même problème et j'ai remarqué que ce problème ne se produit lorsque les images sont placées à l'intérieur d'un div qui est initialement masqué (ie. display: none;)

OriginalL'auteur Omid