懒加载原理就是先利用自定义属性存放图片资源，然后监听浏览器窗口，滑动的时候才设置图片资源（发送请求），从而实现懒加载效果。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>懒加载</title>
</head>
<style type="text/css">
div:not(#wrapper) {
display: block;
height: 400px;
}
</style>
<body>
<div id="wrapper">
<a href="#" class="image featured"><img data-src="http://img02.sogoucdn.com/app/a/100520093/60d2f4fe0275d790-fbe7539243950f9f-7f669dbeead0ad667f21be96b5efd843.jpg" /></a>
<div>占位</div>
<a href="#" class="image featured"><img data-src="http://bizhi.zhuoku.com/2010/10/22/kuanping/kuanping39.jpg" /></a>
<div>占位</div>
<a href="#" class="image featured"><img data-src="http://image.tianjimedia.com/uploadImages/2011/306/MOH58845COC4.jpg" /></a>
<div>占位</div>
<a href="#" class="image featured"><img data-src="http://image.tianjimedia.com/uploadImages/2011/306/EQ2E3ZUPNMNV.jpg" /></a>
<div>占位</div>
<a href="#" class="image featured"><img data-src="http://a2.att.hudong.com/79/22/01000000000000119062273272179.jpg" /></a>
<div>占位</div>
<a href="#" class="image featured"><img data-src="http://img1.3lian.com/2015/w7/90/d/5.jpg" /></a>
<div>占位</div>
<script>
//针对firefox的load事件
window.addEventListener("DOMContentLoaded", lazyLoadImages);
//通用load事件
window.addEventListener("load", lazyLoadImages);
//浏览器窗口调整
window.addEventListener("resize", lazyLoadImages);
//页面滚动事件
window.addEventListener("scroll", lazyLoadImages);
function lazyLoadImages() {
var images = document.querySelectorAll("img[data-src]");
//遍历所有的img标签
//[].forEach.call(...)是Array.prototype.forEach.call(...)简写
[].forEach.call(images, function(item) {
//item是images数组对象，即是一个个img标签
if(elementInViewport(item)) {
//将data-src替换src属性
item.setAttribute("src", item.getAttribute("data-src"));
item.removeAttribute("data-src")
}
})
if(images.length == 0) {
window.removeEventListener("DOMContentLoaded", lazyLoadImages);
window.removeEventListener("load", lazyLoadImages);
window.removeEventListener("resize", lazyLoadImages);
window.removeEventListener("scroll", lazyLoadImages);
}
}
//元素
function elementInViewport(el) {
//获取DOMRect对象边框相对于浏览器的位置
var rect = el.getBoundingClientRect();
//返回DOMRect对象上下左右的位置坐标
return(
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
</script>
</body>
</html>
附图：
PS:此代码仅用于研究懒加载功能具体怎么实现。具体请参考LazyLoad.js插件。
总结：实际的项目中，建议使用LazyLoad.js（2.0）插件或者blazy.js插件，更好的满足项目的实际需求。
时间： 2024-08-03 15:26:21