前端图片懒加载(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.cookie.js 操作cookie实现记住密码功能的实现代码
Apr 27 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
jQuery模拟Marquee实现无缝滚动效果完整实例
Sep 29 Javascript
jquery validation验证表单插件
Jan 07 Javascript
Async Validator 异步验证使用说明
Jul 03 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 02 Javascript
vue elementUI批量上传文件
Apr 26 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
第九节--绑定
2006/11/16 PHP
openPNE常用方法分享
2011/11/29 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
Symfony控制层深入详解
2016/03/17 PHP
详细分析PHP 命名空间(namespace)
2020/06/30 PHP
jquery关于图形报表的运用实现代码
2011/01/06 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
基于bootstrap3和jquery的分页插件
2015/07/31 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
Python3爬虫学习入门教程
2018/12/11 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
Python os模块常用方法和属性总结
2020/02/20 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
Java模拟试题
2014/11/10 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
建筑公司文秘岗位职责
2013/11/29 职场文书
青春演讲稿范文
2014/05/08 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
三峡大坝导游词
2015/01/31 职场文书
电力安全学习心得体会
2016/01/18 职场文书