<script>
var img = document.getElementsByTagName('img');
//设置每次遍历的起始图片，防止重复加载
var n = 0;
//加载可视区域图片
lazyLoad();
function lazyLoad() {
var seeHeight = document.documentElement.clientHeight;
var scrollHeight = document.body.scrollHeight;
for (var i = n; i < img.length; i++) {
if (img[i].src === 'http://m.yytvip.com.cn/hjb/img/m01tzhaoyu.png') {
if (img[i].offsetHeight < seeHeight + scrollHeight) {
img[i].setAttribute('src', img[i].getAttribute('data-src'));
n++;
}
}
}
}
//节流
function throttle(fn, wait, mustTime) {
var timeout = null;
var startTime = new Date();
var curTime;
return function () {
var context = this;
var args = arguments;
curTime = new Date();
if ((curTime - startTime) >= mustTime) {
startTime = curTime;
fn.apply(context, args);
clearTimeout(timeout);
} else {
clearTimeout(timeout);
timeout = setTimeout(function () {
fn.apply(context, args);
startTime = new Date();
}, wait);
}
}
}
window.addEventListener('scroll', throttle(lazyLoad, 2000, 3000));
写法多多
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>lazyLoad nick</title>
<style>
/*容器尺寸最好设置成图片尺寸，避免layout*/
li{height:300px;}
</style>
</head>
<body>
<ul>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
<li>
<img src="http://img.alicdn.com/bao/uploaded/TB1bKIvJVXXXXaJXVXXSutbFXXX.jpg" data-src="http://img.alicdn.com/tps/i4/TB1h30lJFXXXXXzXXXX6o7KSVXX-730-300.jpg">
</li>
</ul>
<script>
window.onscroll = function() {//滚动加载
lazyload();
};
window.onload = function() {//页面加载后首屏自动加载一次
lazyload();
};
function lazyload(lazy) {
lazy = lazy||50;//提前加载的距离
var images = document.images,i = 0, len = images.length;
for (; i < len; i++) {
var obj = images[i];
// obj.getBoundingClientRect().top< document.documentElement.clientHeight 判断元素滚动到可视区返回true
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;//判断首次加载
imageLoaded(obj, obj.dataset.src);
}
}
}
function imageLoaded(obj,src){//img加载完成在设置src，避免img从顶部加载到尾部出现的白板
var img = new Image();
img.onload = function() {
obj.src = img.src;
};
img.src = src;
}
</script>
</body>
</html>
</script>
