JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)


Posted in Javascript onNovember 30, 2016

目录:

  • 懒加载的意义(为什么要使用懒加载)
  • 原理
  • 代码

在上篇文章给大家介绍了JavaScript实现图片懒加载(Lazyload),大家可以参考下。

懒加载的意义(为什么要使用懒加载)

对页面加载速度影响最大的就是图片,一张普通的图片可以达到几M的大小,而代码也许就只有几十KB。当页面图片很多时,页面的加载速度缓慢,几S钟内页面没有加载完成,也许会失去很多的用户。

所以,对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空,然后定义data-src(这个属性可以自定义命名,我才用data-src)属性指向真实的图片。src指向一张默认的图片,否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。

注:图片要指定宽高

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把用户即将看到的图片加载。这样便实现了懒加载。

代码

在写代码前,需要了解各种高度。先看这篇文章scrollTop,offsetTop,scrollLeft,offsetLeft

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

JavaScript

<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>

jQuery

<script>
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>

使用节流函数进行性能优化

如果直接将函数绑定在scroll事件上,当页面滚动时,函数会被高频触发,这非常影响浏览器的性能。

我想实现限制触发频率,来优化性能。

节流函数:只允许一个函数在N秒内执行一次。下面是一个简单的节流函数:

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time 在time时间内必须执行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

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

Javascript 相关文章推荐
jquery.ajax的url中传递中文乱码问题的解决方法
Feb 07 Javascript
jQuery基于当前元素进行下一步的遍历
May 20 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
vue mixins组件复用的几种方式(小结)
Sep 06 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
uni-app 自定义底部导航栏的实现
Dec 11 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 #Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 #Javascript
微信小程序之小豆瓣图书实例
Nov 30 #Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 #Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 #Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 #Javascript
You might like
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php实现的替换敏感字符串类实例
2014/09/22 PHP
PHP设计模式之观察者模式实例
2016/02/22 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python线程的几种创建方式详解
2019/08/29 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
Python如何实现FTP功能
2020/05/28 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
校园之星获奖感言
2014/01/29 职场文书
远程研修随笔感言
2014/02/10 职场文书
服务员岗位职责范本
2015/04/09 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
初中政治教学反思
2016/02/23 职场文书