Skip to content

Instantly share code, notes, and snippets.

@skyhacker2

skyhacker2/按需加载图片Demo.html

Created August 27, 2017 15:35
Show Gist options
  • Save skyhacker2/410ee5e08cc3e92e6bc21843c8b850c0 to your computer and use it in GitHub Desktop.
Save skyhacker2/410ee5e08cc3e92e6bc21843c8b850c0 to your computer and use it in GitHub Desktop.
Download ZIP
按需加载图片，就是让图片默认开始不加载，而且在接近可视区域范围时，再进行加载。也称之为懒惰加载。 1.生成标签时，用data-src来保存图片地址； 2.记录的图片data-src都保存到数组里； 3.对滚动条进行事件绑定,假设绑定的函数为function lazyload(){}; 4.在函数lazyload中，按照下面思路实现：计算图片的Y坐标，并计算可视区域的高度height，当Y小于等于(height+ scrollTop)时，图片的src的值用data-src的来替换，从而来实现图片的按需加载；
Raw
按需加载图片Demo.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>图片按虚加载</title>
</head>
<body>
<style type="text/css">
li { float: left; width: 200px; clear:both;}
</style>
<div style="width:100%; height:1800px; border:1px solid #000">
这里是空白的内容，高度为900像素，目的是方便出现滚动条
<ul style="width:600px;">
<li>
<img width="158" height="158" data-src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg" />
<!-- <img width="158" height="158" src="http://pic6.nipic.com/20100423/4537140_133035029164_2.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://www.jiujiuba.com/xxpict2/picnews/62223245.jpg" />
<!-- <img width="158" height="158" src="http://www.jiujiuba.com/xxpict2/picnews/62223245.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://www.bz55.com/uploads/allimg/100729/095KS455-0.jpg" />
<!-- <img width="158" height="158" src="http://www.bz55.com/uploads/allimg/100729/095KS455-0.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://www.hyrc.cn/upfile/3/200611/1123539053c7e.jpg" />
<!-- <img width="158" height="158" src="http://www.hyrc.cn/upfile/3/200611/1123539053c7e.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://www.mjjq.com/blog/photos/Image/mjjq-photos-903.jpg" />
<!-- <img width="158" height="158" src="http://www.mjjq.com/blog/photos/Image/mjjq-photos-903.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://c.cncnimg.cn/000/954/1416_2_b.jpg" />
<!-- <img width="158" height="158" src="http://c.cncnimg.cn/000/954/1416_2_b.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://www.jiujiuba.com/xxpict2/picnews/62223231.jpg" />
<!-- <img width="158" height="158" src="http://www.jiujiuba.com/xxpict2/picnews/62223231.jpg" /> -->
</li>
<li>
<img width="158" height="158" data-src="http://www.mjjq.com/pic/20070530/20070530043314558.jpg" />
<!-- <img width="158" height="158" src="http://www.mjjq.com/pic/20070530/20070530043314558.jpg" /> -->
</li>
</ul>
<script type="text/javascript">
var API = {
on: function(element, type, handler) {
return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent('on' + type, handler);
},
bind: function(object, handler) {
return function() {
return handler.apply(object, arguments);
}
},
pageX: function(El) {
var left = 0;
do {
left += El.offsetLeft;
} while(El.offsetParent && (El = El.offsetParent).nodeName.toUpperCase() != 'BODY');
return left;
},
pageY: function(El) {
var top = 0;
do {
top += El.offsetTop;
} while(El.offsetParent && (El = El.offsetParent).nodeName.toUpperCase() != 'BODY');
return top;
},
hasClass: function(element, className) {
return element.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
},
attr: function(element, attr, value) {
if (arguments.length === 2) {
return element.attributes[attr] ? element.attributes[attr].nodeValue : undefined
} else if (arguments.length === 3) {
element.setAttribute(attr, value);
}
}
};
var lazyload = function(obj) {
this.lazy = typeof obj === 'string' ? document.getElementById(obj) : document.getElementsByTagName('body')[0];
this.aImg = this.lazy.getElementsByTagName('img');
this.fnLoad = API.bind(this, this.load);
this.load();
API.on(window, 'scroll', this.fnLoad);
API.on(window, 'resize', this.fnLoad);
};
lazyload.prototype = {
load: function() {
var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var iClientHeight = document.documentElement.clientHeight + iScrollTop;
var i = 0;
var aParent = [];
var oParent = null;
var iTop = 0;
var iBottom = 0;
var aNotLoaded = this.loaded(0);
if (this.loaded(1).length != this.aImg.length) {
var notLoadedLen = aNotLoaded.length;
for (i = 0; i < notLoadedLen; i++) {
iTop = API.pageY(aNotLoaded[i]) - 200;
iBottom = API.pageY(aNotLoaded[i]) + aNotLoaded[i].offsetHeight + 200;
var isTopArea = (iTop > iScrollTop && iTop < iClientHeight) ? true : false;
var isBottomArea = (iBottom > iScrollTop && iBottom < iClientHeight) ? true : false;
if (isTopArea || isBottomArea) {
aNotLoaded[i].src = API.attr(aNotLoaded[i], 'data-src') || aNotLoaded[i].src;
if (!API.hasClass(aNotLoaded[i], 'loaded')) {
if ('' != aNotLoaded[i].className) {
aNotLoaded[i].className = aNotLoaded[i].className.concat(" loaded");
} else {
aNotLoaded[i].className = 'loaded';
}
}
}
}
}
},
loaded: function(status) {
var array = [];
var i = 0;
for (i = 0; i < this.aImg.length; i++) {
var hasClass = API.hasClass(this.aImg[i], 'loaded');
if (!status) {
if (!hasClass) {
array.push(this.aImg[i]);
}
}
if (status) {
if (hasClass) {
array.push(this.aImg[i]);
}
}
}
return array;
}
};
API.on(window, 'load', function() { new lazyload(); });
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment