Comment faire du lazy loading image avec srcset?

Je suis en utilisant slick.js de construire un manège. Cependant, même si je change l'attribut de src à data-lazy les images toujours chargées avant que j'ai faites défiler jusqu'à l'image. Je soupçonne que c'est parce que j'ai srcset tag à mon image. Ma question est de savoir comment empêcher le navigateur de charger image réactive ou comment faire du lazy-loading pour répondre correctement les images.

C'est l'exemple de ma balise img

<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px">
vous pouvez essayer de regarder ici: afarkas.github.io/lazysizes
J'ai essayé lazysizes. Mais les images toujours chargées avant que l'image est affichée.

OriginalL'auteur toy | 2015-08-05

  1. 11

    lazySizes est simplement de travailler bien. Vous avez besoin de modifier votre balisage en quelque chose comme cela, cependant. 

    <img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" />

    Note srcset est changé à data-srcset et data-lazy est changé à data-src. En outre, vous devez ajouter la classe lazyload.

    Votre sizes attribut n'a pas fait beaucoup de sens. Peut-être que vous souhaitez utiliser x descripteurs de la place? Ou tout simplement utiliser sizes="200px"? Je ne sais pas. J'ai simplement mis à data-sizes="auto", de sorte qu'il devient automatiquement calculé pour vous. (Mais dans ce cas, la dimension de l'image doit être calculable avant que l'image est chargée.)

    lazySizes en effet en charge les images avant ils sont en vue. C'est une grande amélioration de l'expérience utilisateur. Un utilisateur, qui défile quelque chose dans la vue n'a pas envie d'attendre alors. Un lazyloader qui commence le téléchargement d'une image après il est déjà en vue perturbe l'expérience de l'utilisateur.

    Une bonne chose à propos de lazySizes est que ce paresseux chargeur vérifie si le navigateur est actuellement fortement de télécharger et décide de ce fait, s'il ne télécharge que de visionner des images ou aussi de précontrainte près de visualiser des images.

    Mais si vous ne voulez pas cela, vous pouvez contrôler ce par la définition de la lazySizes' expand et expFactor options.

    OriginalL'auteur alexander farkas

  2. 1

    Je recommande responsivelyLazy. La mise en œuvre est SEO-friendly et ne pas gâcher votre code HTML. Voici un extrait:

    <div class="responsively-lazy" style="padding-bottom:68.44%;">
<img
    alt=""
    src="images/2500.jpg"
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w"
/>

    Comme vous pouvez le voir la valeur dans le src attribut n'est pas modifié.

    Lire plus à http://ivopetkov.com/b/lazy-load-responsive-images/

    OriginalL'auteur Ivo Petkov