按顺序加载图像，有延迟，无脚本回退

Load images in order, with delay, fallback for no script

本文关键字：脚本 回退 延迟 加载 图像 顺序      更新时间：2023-09-26

我想知道是否有人有一个很好的干净的解决方案，可以从页面的顶部到底部加载图像，等待加载前一个图像，然后再加载下一个图像。如果用户没有javascript，则返回到常规的<img>标记。

有相当多的懒惰加载插件，但我想加载所有的图像尽可能快的顺序，他们出现在网站上。

这是因为每个图像都相当大，用户会以相当慢的方式从上到下浏览它们。

有趣的问题。我的方法类似于

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

以下是如何做到这一点：

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

试试这个，首先添加这个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;}
相关文章：