一聚教程网:一个值得你收藏的教程网站

热门教程

js图片如何加载效果 具体实例代码如下

时间:2022-06-29 01:35:11 编辑:袖梨 来源:一聚教程网

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

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

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

一 延迟加载

主要思路:

  1. HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background

  2. js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background

  3. 每成功加载一张图片,进度条的百分比进行相应的变化。

  4. 如果加载不成功,就提示图片加载错误。

HTML结构很简单,就是一个div.picList包裹了所有img,然后加上一个简单的进度条div#loadBar

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)centerno-repeat;

  border:1pxsolidblack;

}

  

#loadBar{

  width:200px;

  height:15px;

  background: linear-gradient(90deg,#187103,#81b50b,#187103);

  border:10pxsolidwhite;

  

  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()即可)

 

 代码如下复制代码

varlazyPic = $('img.lazy');

varloadBarMask = $('#loadBarMask');

varpicList = $('.picList');

  

varactivePic = 0;

vartotalPic = lazyPic.length;

  

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

  

functionloadPicPerSecond(){

  

  lazyPic.each(function(index){

  

    varself = $(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*/

  

functioncountPic(){

  

  activePic++;

  

  varleftPic = totalPic - activePic;

  varpercentPic = 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部分

 

 代码如下复制代码

varlazyPic = $('img.lazy');

varloadBarMask = $('#loadBarMask');

varpicList = $('.picList');

  

varscrollTop,

  clientHeight,

  scrollHeight;

  

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

  

varsrc = [];

  

varactivePic = 0;

vartotalPic = lazyPic.length;

  

//待加载的图片数据

vardirtSrc ="pic/compressed/picList";

varpicData = {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",

]};

  

//加载次数计数器

varscrollIndex = 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张*/

  

functionscrollPic(perAmount = 10){

  

  vartotalAmount = perAmount * (scrollIndex+1);

  

   //考虑到最后一次加载的时候,剩余的图片数量有可能达不到限定的每次加载的数量,这时候需要更改totalAmount的值

  if(totalAmount>picData.imgSrc.length){

    totalAmount = picData.imgSrc.length;

  }

  for(scrollIndex;scrollIndex

    varoimg =newImage();

    oimg.src = picData.imgSrc[scrollIndex];

    picList.append(oimg);

  }

  

}

 

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

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

热门栏目