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 相关文章推荐
JavaScript null和undefined区别分析
Oct 14 Javascript
js显示时间 js显示最后修改时间
Jan 02 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
JavaScript 数组的深度复制解析
Nov 02 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
vue登录以及权限验证相关的实现
Oct 25 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
Vue自定义表单内容检查rules实例
Oct 30 Javascript
js仿淘宝放大镜效果
Dec 28 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实现分页工具类分享
2014/01/09 PHP
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
js实现简单的网页换肤效果
2017/01/18 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
vue项目中全局引入1个.scss文件的问题解决
2019/08/01 Javascript
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
python pip如何手动安装二进制包
2020/09/30 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
银行实习人员自我鉴定
2013/09/22 职场文书
大学应届毕业生个人求职信
2013/09/23 职场文书
优秀社区干部事迹材料
2014/02/03 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
创业培训计划书
2014/05/03 职场文书
数字化校园建设方案
2014/05/03 职场文书
五好家庭申报材料
2014/12/20 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
使用golang编写一个并发工作队列
2021/05/08 Golang
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python