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 各种浏览器下获得日期区别
Dec 22 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
Jun 15 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 Javascript
利用JavaScript写一个简单计算器
Nov 27 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出错界面
2006/10/09 PHP
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
URL Rewrite的设置方法
2007/01/02 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
PHP输出当前进程所有变量/常量/模块/函数/类的示例
2013/11/07 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
非常好的js代码
2006/06/27 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
2019/11/01 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
python合并同类型excel表格的方法
2018/04/01 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
python安装scipy的方法步骤
2019/06/26 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
美国相机和电子产品零售商:Beach Camera
2020/11/26 全球购物
小摄影师教学反思
2014/04/27 职场文书
一体化教学实施方案
2014/05/10 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
欠款起诉书范文
2015/05/19 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript