<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
ul {
margin: 0 auto;
padding: 0;
width: 300px;
list-style: none;
}
.lazy {
margin-bottom: 100px;
width: 300px;
height: 168px;
text-align: center;
line-height: 168px; /*垂直居中*/
}
</style>
<body>
<ul>
<li class=‘lazy‘><img data-original=‘images/0.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/1.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/2.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/3.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/4.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/5.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/6.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/7.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/8.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/9.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/10.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/11.jpg‘ src=‘images/loading.gif‘/></li>
<li class=‘lazy‘><img data-original=‘images/12.jpg‘ src=‘images/loading.gif‘/></li>
</ul>
<script>
init();
function init() {
var images = document.images;
// 加载首屏图片
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
// 如果在可视区域并且还没被加载过
if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
// 先调用 HTML5 方法
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute(‘data-original‘));
} else {
break;
}
}
}
window.onscroll = function() {
lazyload();
};
function lazyload() {
var lazy = 500;
var images = document.images;
for (var i = 0, len = images.length; i < len; i++) {
var obj = images[i];
if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
obj.isLoad = true;
obj.style.cssText = "transition: ‘‘; opacity: 0;"
if (obj.dataset)
imageLoaded(obj, obj.dataset.original);
else
imageLoaded(obj, obj.getAttribute(‘data-original‘));
}
if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
obj.isShow = true;
obj.style.cssText = "transition: 1s; opacity: 1;"
}
}
}
function imageLoaded(obj, src) {
var img = new Image();
img.onload = function() {
obj.src = src;
};
img.src = src;
}
</script>
</body>
</html>
时间： 2024-12-25 08:20:40