懒加载 js----例子------图片
转载自：https://www.jianshu.com/p/9b30b03f56c2
懒加载工具类
<script type="text/javascript">
//懒加载工具方法
function lazyload(idName) {
var imgs;
if (idName == "container") {
imgs = document.getElementById('container').querySelectorAll('img');
}
H = window.innerHeight;
var lazyFunc=function () {
var S = document.documentElement.scrollTop || document.body.scrollTop;
[].forEach.call(imgs, function (img) {
if (!img.getAttribute('data-src')) {
return
};
if (H + S + 200 > getTop(img)) {
img.src = img.getAttribute("data-src");
img.removeAttribute("data-src");
}
})
};
window.onload = window.onscroll = lazyFunc;
window.onscroll = lazyFunc;
lazyFunc();
function getTop(e) {
var T = e.offsetTop;
while (e = e.offsetParent) {
T += e.offsetTop;
}
return T;
};
};
lazyload("container");//执行懒加载，可以哪里需要哪里再加
</script>
结束。
原理：就是当图片出现在浏览器可视区域中时，再把图片的url传给它，也可以在这个时候创建图片，而图片被包裹在一个容器中，比如li或div，图片的url放在其容器的自定义属性data-src中；
document.documentElement.clientWidth //屏幕宽 375
document.documentElement.clientHeight //屏幕高 667
document.documentElement.scrollTop //左上角到html鼎高 当前视线元素划上去了多少，也就是当前00原点到页鼎html元素的高度 最底端3457
document.documentElement.scrollHeight //4124 总页高
window.innerHeight //667
window.innerWidth //375
判定其加载条件是，当图片距离页面顶端的距离小于浏览器滚动距离加上可视区域高度，即它出现在可视区域时，就加载它；
- 获取图片距离页面顶端的高度利用offsetTop计算出其距离offsetParent的高度，再循环叠加，最终获取到其距离页面顶端的高度：
//offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetParent;
}
return T;
} 作者：MatthewMaYao
链接：https://www.jianshu.com/p/9b30b03f56c2
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
- 可视区域高度为
var H = window.innerHeight;
- 滚动距离为
var S = document.documentElement.scrollTop || document.body.scrollTop;
然后定义赋值函数
function lazyLoad(imgs) {
var H = window.innerHeight;
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
作者：MatthewMaYao
链接：https://www.jianshu.com/p/9b30b03f56c2
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
最后在把页面滚动函数赋值给元素window.onload，在所有元素加载完以后再进行操作，这一步很重要！
window.onload = window.onscroll = function () {
lazyLoad(imgs);
}
全部代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片懒加载</title>
</head> <style>
img {
display: block;
}
</style> <body>
<div>
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片">
<img src="" data-src="data:images/girl1.jpg" alt="图片"> </div>
</body>
<script type="text/javascript"> var imgs = document.querySelectorAll('img'); //offsetTop是元素与offsetParent的距离，循环获取直到页面顶部
function getTop(e) {
var T = e.offsetTop;
while(e = e.offsetParent) {
T += e.offsetParent;
}
return T;
} function lazyLoad(imgs) {
var H = window.innerHeight;
var S = document.documentElement.scrollTop || document.body.scrollTop;
for (var i = 0; i < imgs.length; i++) {
if (H + S > getTop(imgs[i])) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
} window.onload = window.onscroll = function () {
lazyLoad(imgs);
} // var imgs = document.body.querySelectorAll('img'),
// H = window.innerHeight; //浏览器视窗高度
// function lazyload() {
// var S = document.documentElement.scrollTop || document.body.scrollTop; //滚动条滚过高度
// [].forEach.call(imgs, function (img) {
// if (!img.getAttribute('data-src')) {
// return
// } //已经替换过的跳过
// if (H + S - 200 > getTop(img)) { //为达到演示效果，这里H+S减去200，延后加载时机
// img.src = img.getAttribute("data-src");
// img.removeAttribute("data-src");
// }
// });
// [].every.call(imgs, function (img) {
// return !img.getAttribute('data-src')
// }) && (window.removeEventListener("scroll", lazyload, false)); //完成所有替换后注销事件
//
// }
//
// window.addEventListener("scroll", lazyload, false);
// window.addEventListener("load", lazyload, false);
//
// function getTop(e) {
// var T = e.offsetTop;
// while (e = e.offsetParent) {
// T += e.offsetTop
// }
// return T
// } </script>
</html> 作者：MatthewMaYao
链接：https://www.jianshu.com/p/9b30b03f56c2
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
结束。
懒加载 js----例子------图片的更多相关文章
- 懒加载js实现和优化
1.懒加载的作用和原理 在我们展示多图片的场景下,类似淘宝或者百度图片,由于图片的数目过多,全部从服务器请求会给用户糟糕的用户体验,为了提升用户体验,我们这里使用懒加载,随着下拉逐步加载. 每个图片的 ...
- 基于jquery的图片懒加载js
function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...
- 爬虫之图片懒加载技术及js加密
图片懒加载 图片懒加载概念: 图片懒加载是一种网页优化技术.图片作为一种网络资源,在被请求时也与普通静态资源一样,将占用网络资源,而一次性将整个页面的所有图片加载完,将大大增加页面的首屏加载时间.为了 ...
- 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- js, javascript 图片懒加载 实例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js插件---图片懒加载lazyload
js插件---图片懒加载lazyload 一.总结 一句话总结:使用异常简单,src里面放加载的图片,data-original里面放原图片,不懂的位置去官网或者github找API就好. 1.laz ...
- 如何使用echo.js实现图片的懒加载（整理）
如何使用echo.js实现图片的懒加载(整理) 一.总结 一句话总结:a.在img标签中添加data-echo属性加载真实图片:<img class="loading" sr ...
- 原生js - 两种图片懒加载实现原理
目前图片懒加载的方式主要有两种: 1.利用getBoundingClientRectAPI得到当前元素与视窗的距离来判断 2.利用h5的新API IntersectionObserver 来实现 ge ...
随机推荐
- Logstash zabbix 插件
zabbix 监控 logstash 安装社区扩展包wget http://download.elasticsearch.org/logstash/logstash/logstash-contrib- ...
- shell脚本学习总结04--终端信息的获取和设置
tput tput 命令将通过 terminfo 数据库对您的终端会话进行初始化和操作.通过使用 tput,您可以更改几项终端功能,如移动或更改光标.更改文本属性,以及清除终端屏幕的特定区域. 文本属 ...
- 第十篇：Linux中权限的再讨论( 上 )
前言 在Linux系统中,用户分为 个权限位.好了,很多朋友对于Linux权限的了解就仅限于此了.但,Linux目录权限和文件权限一样吗?内核对于权限的检查过程又是怎样的? 如果你不清楚,本文将为你解 ...
- jquery树形菜单
转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 巨蟒python全栈开发flask15项目开始7
1.连续收取未读消息&&未读消息所属人 2.Pypinyin NLP中文同音字识别 3.jieba分词 4.Gemsim框架之LsiModel稀疏矩阵相似度 5.Gensim的应用 6 ...
- Microservices 微服务概念和优点 自治 弹性 级联故障 微服务的问题 CAP 分布式事务 修改一个服务并对其部署而不影响其他任务服务
https://en.wikipedia.org/wiki/Microservices https://zh.wikipedia.org/wiki/微服務 微服務 (Microservices) 是一 ...
- Javascript闭包学习（Closure）
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 下面就是我的学习笔记,对于Javascript初学者应该是很有用的. 一.变量的作用域 要理解 ...
- CMDB实现的四种方式
第一种(agent): 这种方式是通过向每一台服务器安装agent脚本,然后通过中控机的API,来收集所需要的数据,最后放到数据库中,在通过web的方式显示出来. 实现流程图: 1.录入资产(主机名, ...
- sql server中使用xp_cmdshell
关键词:sql server开启高级配置,使用Bat,cmdshell 1.sql server中使用xp_cmdshell --允许配置高级选项 GO RECONFIGURE GO . --开启xp ...
- 《Python入门》Windows 7下Python Web开发环境搭建笔记
最近想尝试一下在IBM Bluemix上使用Python语言创建Web应用程序,所以需要在本地搭建Python Web的开发测试环境. 关于Python的版本 进入Python的网站,鼠标移到导航条上 ...