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


Posted in Javascript onMay 12, 2017

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

一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了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都写上了,以后可以直接用。将数值关系搞定之后,只要满足条件就触发加载即可。

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

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
jQuery 表单验证插件formValidation实现个性化错误提示
Jun 23 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
详解node中创建服务进程
May 09 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
javascript实现拼图游戏
Jan 29 Javascript
微信小程序之数据双向绑定与数据操作
May 12 #Javascript
Flask中获取小程序Request数据的两种方法
May 12 #Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 #Javascript
微信小程序 支付功能实现PHP实例详解
May 12 #Javascript
深入理解JavaScript继承的多种方式和优缺点
May 12 #Javascript
JS实现图片预加载之无序预加载功能代码
May 12 #Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 #Javascript
You might like
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php中file_exists函数使用详解
2015/05/08 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
10个php函数实用却不常见
2015/10/13 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
关于跨站脚本攻击问题
2011/12/22 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
2014/03/12 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
JS动态显示倒计时效果
2019/12/12 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Vue如何跨组件传递Slot的实现
2020/12/14 Vue.js
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
领导干部培训感言
2014/01/23 职场文书
ktv中秋节活动方案
2014/01/30 职场文书
校企合作协议书
2014/04/16 职场文书
银行求职自荐书
2014/06/25 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
pycharm 如何查看某一函数源码的快捷键
2021/05/12 Python
Java 在线考试云平台的实现
2021/11/23 Java/Android