欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

js图片加载效果实例代码（延迟加载+瀑布流加载）

程序员文章站 2023-11-07 18:46:52
主要做了两种图片加载的效果 一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间） 另外一种是根据滑块的位置进行图...

主要做了两种图片加载的效果

一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）

另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果

一 延迟加载

主要思路：

  1. html的img标签中，将正确的地址存在data-src属性中，给所有图片设置一个转圈圈的loading图片作为background
  2. js中，依次读取每一个img，将data-src中的地址替换到src中，去掉background
  3. 每成功加载一张图片，进度条的百分比进行相应的变化。
  4. 如果加载不成功，就提示图片加载错误。

html结构很简单，就是一个div.piclist包裹了所有img，然后加上一个简单的进度条div#loadbar

<body>
  <div class="piclist">
    <img class="lazy" data-src="pic/compressed/piclist1.jg">
    <img class="lazy" data-src="pic/compressed/piclist2.jpg">
    <img class="lazy" data-src="pic/compressed/piclist3.jpg">
    <img class="lazy" data-src="pic/compressed/piclist4.jpg">
    <img class="lazy" data-src="pic/compressed/piclist5.jpg">
    <img class="lazy" data-src="pic/compressed/piclist6.jpg">
    <img class="lazy" data-src="pic/compressed/piclist7.jpg">
    <img class="lazy" data-src="pic/compressed/piclist8.jpg">
    <img class="lazy" data-src="pic/compressed/piclist9.jpg">
    <img class="lazy" data-src="pic/compressed/piclist10.jpg">
  </div>

  <div id="loadbar">
    <div id="loadbarmask"></div>
  </div>
</body>

css（使用的scss，编译时会自动加上各种兼容前缀）

.piclist{
  img{
    width: 100px;
    height: 100px;
    position: relative;

    /*加载失败时显示灰底文字*/
    &:after{
      content: "( ⊙ o ⊙ )加载失败";
      font-size: 6px;
      font-family: fontawesome;
      color: rgb(100, 100, 100);
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background-color: #ddd;
    }
  }
}

.lazy{
  background: url(../pic/loading.gif) center no-repeat;
  border: 1px solid black;
}

#loadbar{
  width: 200px;
  height: 15px;
  background: linear-gradient(90deg,#187103,#81b50b,#187103);
  border: 10px solid white;

  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -100px;

  #loadbarmask{
    width: 70%;//这个数值显示没有加载成功的图片
    height: 100%;
    background-color: beige;
    position: absolute;
    right: 0;
  }
}

css里面需要注意的地方有两个：

  1. 一个是把图片加载错误时显示的灰底文字放在了img的after伪类中，当图片加载失败，又去掉了background的gif图片之后，就会显示这个部分的内容及样式。
  2. 一个是进度条的样式。写得很简单，主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载，白色表示未加载。显示的时候，直接控制白色那层的宽度即可。

js部分（直接执行loadpicpersecond()即可）

var lazypic = $('img.lazy');
var loadbarmask = $('#loadbarmask');
var piclist = $('.piclist');

var activepic = 0;
var totalpic = lazypic.length;

/*每秒加载一张图片*/

function loadpicpersecond(){

  lazypic.each(function(index){

    var self = $(this);

    //console.log(self[0].complete);
    /*img标签已经事先写在html中，所以此时的complete状态全部都是true*/

    settimeout(function(){

      src[index] = self.attr('data-src');
      self.attr('src',src[index]);
      self.removeclass('lazy');

      //图片获得正确src地址之后，可以执行下面的onload操作
      self[0].onload = function(){

        //加载读条loadbar动画
        countpic();
      }

      //图片获得的src地址不正确时，执行下面的onerror操作
      self[0].onerror = function(){
        /*this.style.background = 'url(pic/compressed/piclist18.jpg) center no-repeat';*/
        countpic();
      }

    },1000*index);

  })

}

/*根据onload的执行情况来计算当前的图片加载进度.每onload一次，activepic就增加1*/

function countpic(){

  activepic++;

  var leftpic = totalpic - activepic;
  var percentpic = math.ceil(leftpic/totalpic*100);//没有加载的图片百分比，和loadbarmask的宽度占比配合

  console.log("已加载"+(100-percentpic)+"%");

  loadbarmask.css("width",percentpic+"%");

  if(percentpic==0){
    $('#loadbar').hide();
  }
}

二 瀑布流加载

主要思路：

  1. 监听窗口滚动情况，当已经加载的图片的最后一张快要进入窗口的时候，开始加载下面的图片。
  2. 假设所有的图片地址已经存在一个json数据中，每次读取10张图片地址，加载它们之后，插入到现有的瀑布流末尾。
  3. 如此往复，直到加载完所有图片。

html和前面部分相同，只是把src写成正常地址即可。css完全一样。

js部分

var lazypic = $('img.lazy');
var loadbarmask = $('#loadbarmask');
var piclist = $('.piclist');

var scrolltop,
  clientheight,
  scrollheight;

var threshold = 200; //最后一张图片距离窗口200px的时候开始加载图片

var src = [];

var activepic = 0;
var totalpic = lazypic.length;

//待加载的图片数据
var dirtsrc = "pic/compressed/piclist";
var picdata = {imgsrc:[
  dirtsrc + "20.jpg",
  dirtsrc + "21.jpg",
  dirtsrc + "22.jpg",
  dirtsrc + "23.jpg",
  dirtsrc + "24.jpg",
  dirtsrc + "25.jpg",
  dirtsrc + "26.jpg",
  dirtsrc + "27.jpg",
  dirtsrc + "28.jpg",
  dirtsrc + "29.jpg",
  dirtsrc + "30.jpg",
  dirtsrc + "31.jpg",
  dirtsrc + "32.jpg",
  dirtsrc + "33.jpg",
  dirtsrc + "34.jpg",
  dirtsrc + "35.jpg",
  dirtsrc + "36.jpg",
  dirtsrc + "37.jpg",
  dirtsrc + "38.jpg",
  dirtsrc + "39.jpg",
  dirtsrc + "40.jpg",
  dirtsrc + "41.jpg",
  dirtsrc + "42.jpg",
  dirtsrc + "43.jpg",
  dirtsrc + "44.jpg",
  dirtsrc + "45.jpg",
  dirtsrc + "46.jpg",
  dirtsrc + "47.jpg",
  dirtsrc + "48.jpg",
  dirtsrc + "49.jpg",
]};

//加载次数计数器
var scrollindex = 0;

$(function(){

  /*监听窗口滚动情况*/
  $(window).on('scroll',function(){

    scrolltop = $(window).scrolltop();//$(window).scrolltop()==document.body.scrolltop
    clientheight = $(window).height();
    scrollheight = piclist.last().height();//piclist.last()[0].clientheight

    /*目标与窗口的距离达到阈值时开始加载*/
    if(scrollheight-clientheight-scrolltop < threshold){
      scrollpic(10);
    }
  })
})

/*根据滚动程度加载图片，每次加载peramount张*/

function scrollpic(peramount = 10){

  var totalamount = peramount * (scrollindex+1);

   //考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalamount的值
  if(totalamount>picdata.imgsrc.length){
    totalamount = picdata.imgsrc.length;
  }
  for(scrollindex;scrollindex<totalamount;scrollindex++){
    var oimg = new image();
    oimg.src = picdata.imgsrc[scrollindex];
    piclist.append(oimg);
  }

}

比较捉急的就是scrolltop、height那几个值的取值对象，总是记不清楚，所以按照js和jquery都写上了，以后可以直接用。将数值关系搞定之后，只要满足条件就触发加载即可。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： 使用js将div高度设置为100%

下一篇： 深入理解JavaScript继承的多种方式和优缺点

推荐阅读