图片懒加载原理-实例二

接着上面做一下补充：

1、dataset的用法，与attribute的区别

2、获取图片到页面顶部高度的正确方法

3、怎样处理已经显示的图片重复遍历的问题

4、 scroll事件的触发频率很快，怎么减小其处理函数的调用频率

与dataset和getAttribute

1、它是html5自定义属性，低版本浏览器不兼容

2、html标签中定义：data-属性名，可设置多个

3、js中typeof img.dataset，值为object；

　　获取所有自定义属性：img.dataset

　　获取某个属性：img.dataset[属性名]

　　添加某个属性：img.dataset[属性名]=值

　　删除某个属性：delete img.dataset.属性名

4、与getAttribute和setAttribute相比，dataset更具语义化，代码更简洁

获取图片到页面顶部高度的正确方法

function getTop(obj) {var h = 0;while (obj) {h += obj.offsetTop;obj = obj.offsetParent;}return h;
}

offsetParent(定位父级)的定义：与当前元素最近的非默认定位(position是static)的父级元素

已加载的图片不再遍历

var img = document.getElementsByTagName('img'),n = 0;
function lazyLoad() {var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);for (var i = n;  i < img.length;  i++) {if (getTop(img[i]) < top) {setSrc(img[i]);n=i;}}
}

最终效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.imgbox {width: 100%;min-height: 150px;margin: 20px 0;border: 1px solid red;}.imgbox img {width: 100%;}</style>
</head>
<body>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div>
<div class="imgbox"><img data-src="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://cover.read.duokan.com/mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://77fkxu.com1.z0.glb.clouddn.com/20160308/1457402219_73571.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://imgsrc.baidu.com/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://pic1.cxtuku.com/00/16/18/b3809a2ba0f3.jpg"/></div>
<div class="imgbox" style="position:relative"><img data-src="http://img.bitscn.com/upimg/allimg/c150708/14363B06253120-6060O.jpg"/></div></body>
<script>var img = document.getElementsByTagName('img');var n = 0;function getTop(obj) {var h = 0;while (obj) {h += obj.offsetTop;obj = obj.offsetParent;}return h;}function setSrc(imgNode){var src='';if (imgNode.dataset) {src=imgNode.dataset.src;} else {src=imgNode.getAttribute('data-src');}imgNode.src=src;}function lazyLoad() {var top =document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);for (var i = n; i < img.length; i++) {console.log(top);if (getTop(img[i]) < top) {setSrc(img[i]);n=i;}}}window.onscroll = lazyLoad;window.onload=function () {window.onscroll();}</script>
</html>

View Code

发现还有一个问题没有处理： scroll事件的触发频率很快，怎么减小其处理函数的调用频率，请看下一篇节流函数的介绍

转载于:https://www.cnblogs.com/aredleave/p/7573166.html

图片懒加载原理-实例二相关推荐

使用jQuery实现图片懒加载原理
在网页中,常常需要用到图片,而图片需要消耗较大的流量.正常情况下,浏览器会解析整个HTML代码,然后从上到下依次加载的图片标签.如果页面很长,隐藏在页面下方的图片其实已经被浏览器加载了.如果用户不向下 ...
js实现图片懒加载原理（marksheng）
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
js实现图片懒加载原理
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多.服务器压力就会很大.不仅影响渲染速度还会浪费带宽.比如一个1M大小的图片,并发情况下,达到10 ...
js图片懒加载原理、实现及节流优化
1.懒加载原理在图片没有进入可视区域时,先给的src一个默认加载的图片,这样浏览器就不会发送请求了,等到图片进入可视区域再把真实的图片路径data-src给src. 2.具体实现 1. 效果 2. ...
html图片懒加载,图片懒加载原理及实现
原理: 先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视 ...
图片懒加载原理及实现
原理: 先将img标签的src链接设为同一张图片(比如空白图片),然后给img标签设置自定义属性(比如 data-src),然后将真正的图片地址存储在data-src中,当JS监听到该图片元素进入可视 ...
小程序swiper怎么让内容撑开高度_小程序瀑布流组件：支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
Vue自定义指令及实现图片懒加载指令
一. 速识概念: 在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示.比如有 v-module,v-for,v-if,v-show 等等,每个指令都能实现一 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...

图片懒加载原理-实例二

图片懒加载原理-实例二相关推荐

最新文章

热门文章