JavaScript实现图片懒加载(Lazyload)


Posted in Javascript onNovember 28, 2016

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

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

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

原理

将页面中的img标签src指向一张小图片或者src为空,然后定义data-src(这个属性可以自定义命名,我才用data-src)属性指向真实的图片。

<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="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
<img src="" 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") == "") {
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") == "") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>

如果大家感觉此文介绍的不够详细,大家可以参考下这篇文章:

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

Javascript 相关文章推荐
斜45度寻路实现函数
Aug 20 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
Sep 26 Javascript
JQuery ztree 异步加载实例讲解
Feb 25 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
JQuery学习总结【一】
Dec 01 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
vue实现点击图片放大效果
Aug 15 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 #Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 #Javascript
String字符串截取的四种方式总结
Nov 28 #Javascript
localStorage实现便签小程序
Nov 28 #Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 #Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 #Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
Nov 28 #Javascript
You might like
php分页思路以及在ZF中的使用
2012/05/30 PHP
laravel请求参数校验方法
2019/10/10 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
另类调用flash无须激活的方法
2006/12/27 Javascript
一道关于JavaScript变量作用域的面试题
2016/03/08 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
把普通对象转换成json格式的对象的简单实例
2016/07/04 Javascript
基于js中的原型、继承的一些想法
2016/08/10 Javascript
Bootstrap导航条的使用和理解3
2016/12/14 Javascript
JS中的三个循环小结
2017/06/20 Javascript
详解vue组件通信的三种方式
2017/06/30 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python 性能优化技巧总结
2016/11/01 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
python利用smtplib实现QQ邮箱发送邮件
2020/05/20 Python
python处理csv中的空值方法
2018/06/22 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python list转置和前后反转的例子
2019/08/26 Python
Python3 合并二叉树的实现
2019/09/30 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
python 19个值得学习的编程技巧
2020/08/15 Python
乐高西班牙官方商店:LEGO Shop ES
2019/12/01 全球购物
大学生的应聘自我评价
2013/12/13 职场文书
幼师求职自荐信范文
2014/01/26 职场文书
蜜蜂引路教学反思
2014/02/04 职场文书
环保标语大全
2014/06/12 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Nginx+Tomcat负载均衡多实例详解
2022/04/11 Servers