Question

我想知道是否有人有一个很好的清洁解决方案来从页面的顶部到底部加载图像，等待上一个图像加载到下一个之前。如果用户剂量有javascript落在常规<img>标签上。

有很多延迟加载插件，但我想按照它们在网站上出现的顺序尽快加载所有图像。

原因是每张图片都相当大，用户会以相当慢的方式从上到下浏览它们。

Answer 1

有趣的问题。我的方法就是这样的

＆＃13;

$(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);
  
});

＆＃13;

#imgz img {
  width: 250px;
  border: 1px dotted gray;
  clear: both;
  display: block;
}

＆＃13;

<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>

＆＃13;

Answer 2

试试这个，首先添加这个css

   img{display:none;}

jquery

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


   });

对于后备，您可以这样做，首先添加此jquery，只有在启用了js

时才会运行

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

然后这个

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


   });

并且在css中，如果jquery措辞并且body具有类.jse

将会应用

 .jse img {display:none;}

Answer 3

以下是如何做到的：

$(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);
    });
});

请在此处查看：JSFiddle

按顺序加载图像，延迟，没有脚本的后备

3 个答案: