Je me demande si quelqu'un a une belle solution propre pour charger des images de haut en bas d'une page, en attendant que l'image précédente se charge avant de passer à la suivante. Et au cas où l'utilisateur aurait recours au javascript sur une balise <img> normale.

Il existe plusieurs plugins de chargement paresseux, mais je voudrais charger toutes les images aussi rapidement que possible dans l'ordre dans lequel elles apparaissent sur le site Web.

La raison en est que chaque image est assez grande et que l'utilisateur les parcourra de haut en bas de manière assez lente.

3
JensB 2 nov. 2014 à 21:38

3 réponses

Meilleure réponse

Question interessante. mon approche serait quelque chose comme ça

$(function(){

  var loadNext = function(){
    var next_guy = $('#imgz img[x-src]').first();
    next_guy.prop('src', next_guy.attr('x-src'));
    next_guy.removeAttr('x-src');
    
  };
  
  $('#imgz img').on('load',loadNext);
  
});
#imgz img {
  width: 250px;
  border: 1px dotted gray;
  clear: both;
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgz">
  <img src="http://i.imgur.com/mThaO.jpg" />
  <img x-src="http://i.imgur.com/DO1kZ.jpg" />
  <img x-src="http://i.imgur.com/lD2HS.jpg" />
  <img x-src="http://i.imgur.com/4vqE3.jpg" />
  <img x-src="http://i.imgur.com/TXXbx.jpg" />
  <img x-src="http://i.imgur.com/TF3z2.jpg" />
</div>
2
code_monk 2 nov. 2014 à 18:53

Voici comment procéder:

$(document).ready(function () {
    var $images = $("img");
    //First hide all images
    $images.hide();

    function lazyLoad(num) {
        $images.eq(num).fadeIn(function () {
            if (num != $images.length) {
                lazyLoad(++num);
            }
        });
    }
    //When first has loaded start fading in
    $images.eq(0).load(function () {
        lazyLoad(0);
    });
});

Découvrez-le ici: JSFiddle

0
Johan Karlsson 2 nov. 2014 à 19:05

Essayez ceci, ajoutez d'abord ce css

   img{display:none;}

Jquery

   $("img").each(function(index, value){
   $(this).delay(300*index).fadeIn();   


   });

Pour le repli, vous pouvez le faire, ajoutez d'abord cette requête qui ne fonctionnera que si js est activé

$(function(){$('body').addClass('jse');});

Ensuite ceci

  $("img").each(function(index, value){
   $(this).delay(300*index).fadeIn();   


   });

Et en css, cela ne sera appliqué que si jquery est formulé et que body a la classe .jse

 .jse img {display:none;}
0
A.B 2 nov. 2014 à 19:16