前端图片懒加载(lazyload)的实现方法(提高用户体验)


Posted in Javascript onAugust 21, 2017

定义

图片懒加载又称图片延时加载、惰性加载,即在用户需要使用图片的时候加载,这样可以减少请求,节省带宽,提高页面加载速度,相对的,也能减少服务器压力。

惰性加载是程序人性化的一种体现,提高用户体验,防止一次性加载大量数据,而是根据用户需要进行资源的请求。

实现

懒加载的难点在于确定某张图片是否是用户需要的资源,在浏览器中,用户需要的是可视区内的资源,因此我们只需要判断图片是否已经呈现在可视区内,当图片呈现在可视区内时,获取图片的真实地址并赋给该图片即可(图片宽高需要指定,可以利用padding处理)。

判断是否存在于可视区

浏览器视口高度

待加载资源距离视口顶端位置

通过以上两点即可判断图片是否位于可视区内。

var nodes = document.querySelectorAll('img[data-src]'),
  elem = nodes[0],
  rect = elem.getBoundingClientRect(),
  vpHeight = document.documentElement.clientHeight;
if(rect.top < vpHeight && rect.bottom>=0) {
 console.log('show')
}

之后获取图片的真实地址

<img src="loading.gif" alt="" data-src="1.gif">
...
<script data-filtered="filtered">
  var src = elem.dataset.src;
</script>

把真实地址赋给图片

var img = new Image();
img.onload = function(){
 elem.src = img.src;
}
img.src = src;

完整代码

var scrollElement = document.querySelector('.page'),
  viewH = document.documentElement.clientHeight;
function lazyload(){
 var nodes = document.querySelectorAll('img[data-src]');
 Array.prototype.forEach.call(nodes,function(item,index){
  var rect;
  if(item.dataset.src==='') return;
  rect = item.getBoundingClientRect();
  if(rect.bottom>=0 && rect.top < viewH){
    (function(item){
     var img = new Image();
     img.onload = function(){
      item.src = img.src;
     }
     img.src = item.dataset.src
     item.dataset.src = ''
    })(item)
  }
 })
}
lazyload();
scrollElement.addEventListener('scroll',throttle(lazyload,500,1000));
function throttle(fun, delay, time) {
  var timeout,
    startTime = new Date();
  return function() {
    var context = this,
      args = arguments,
      curTime = new Date();
    clearTimeout(timeout);
    if (curTime - startTime >= time) {
      fun.apply(context, args);
      startTime = curTime;
    } else {
      timeout = setTimeout(fun, delay);
    }
  };
};

总结

以上所述是小编给大家介绍的前端图片懒加载(lazyload)的实现方法(提高用户体验),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
JavaScript中的条件判断语句使用详解
Jun 03 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
js检测iframe是否加载完成的方法
Nov 26 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
js实现日历的简单算法
Jan 24 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
vue 使用post/get 下载导出文件操作
Aug 07 Javascript
Vue编写多地区选择组件
Aug 21 #Javascript
使用vue制作FullPage页面滚动效果
Aug 21 #Javascript
详解Layer弹出层样式
Aug 21 #Javascript
JS数组操作之增删改查的简单实现
Aug 21 #Javascript
JS实现评价的星星功能
Aug 20 #Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 #Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 #Javascript
You might like
PHP中在数据库中保存Checkbox数据(1)
2006/10/09 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
2009/12/15 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
vue中多个倒计时实现代码实例
2019/03/27 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python用户管理系统
2018/03/13 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Django中URL的参数传递的实现
2019/08/04 Python
OpenCV4.1.0+VS2017环境配置的方法步骤
2020/07/09 Python
工商管理本科毕业生求职信范文
2013/10/05 职场文书
写自荐信的七个技巧
2013/10/15 职场文书
保安的辞职报告怎么写
2014/01/20 职场文书
《老王》教学反思
2014/02/23 职场文书
2015新学期开学寄语
2015/02/26 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS