前端图片懒加载(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 相关文章推荐
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
深入学习Vue nextTick的用法及原理
Oct 08 Javascript
详细分析React 表单与事件
Jul 08 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
vue项目实现分页效果
Mar 24 Vue.js
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导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
React中使用UMEditor的方法示例
2019/12/27 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
python实现感知器算法(批处理)
2019/01/18 Python
Python @property使用方法解析
2019/09/17 Python
python脚本后台执行方式
2019/12/21 Python
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
Keds加拿大官网:购买帆布运动鞋和皮鞋
2019/09/26 全球购物
Marlies Dekkers内衣荷兰官方网店:荷兰奢侈内衣品牌
2020/03/27 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
编程实现去掉XML的重复结点
2014/05/28 面试题
水利学院求职自荐书
2014/02/01 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP
解决Tkinter中button按钮未按却主动执行command函数的问题
2021/05/23 Python
解析Java异步之call future
2021/06/14 Java/Android
Linux中如何安装并部署Redis
2022/04/18 Servers
MySQL 原理与优化之Limit 查询优化
2022/08/14 MySQL
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers