图片懒加载
演示代码：lazyload
在这方面大名鼎鼎的jQuery插件:jquery.lazyload.js,是我们做页面懒加载优化的首选。当然大神的源码也很简洁。
原理实现
本人不才，请忽略本人的粗鄙代码(兼容性，完备性，健壮性可自行实现)，重在思路。
判断图片是否在可视区域内
图片加载的时机，就是图片出现在浏览器的窗口可视区域内。
这里我们可以通过下面代码来判断图片是否出现在了符合条件的区域内。
var doms = document.querySelectorAll('img[data-src]'); //1
var rect = doms[0].getBoundingClientRect(); //2
var viewHeight = document.documentElement.clientHeight; //3
if (rect.top < viewHeight && rect.bottom >= 0) { //4
//符合条件可加载图片
}
这里需要说明的几个点：
- 第二列中的
getBoundingClientRect是用来获取一个对象的top,left,right,bottom,width,height这几个值。 - 第三列是用来获取dom的可视高度
- 第四列的2个判断
rect.top < viewHeight用来判断图片的上边缘距离浏览器下边缘的高度rect.bottom >= 0用来判断图片的下边缘距离浏览器的上边缘高度
滚轮事件监听
| 浏览器 | 实现方法 | 事件属性 | 向上滚动 | 向下滚动 |
|---|---|---|---|---|
| FireFox | DOMMouseScroll | detail | -3 | 3 |
| 非FireFox | onmousewheel | wheelDelta | 120 | -120 |
完整代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Zqz_loadLoad实现</title>
</head>
<body>
<div style=" 100px;height: 1000px"></div>
<img src="图1" data-src='./img/1.jpg' width="300px" height="300px" />
<img src="图2" data-src='./img/2.png' width="300px" height="300px" />
<img src="图3" data-src='./img/3.png' width="300px" height="300px" />
<img src="图4" data-src='./img/4.png' width="300px" height="300px" />
<img src="图5" data-src='./img/5.png' width="300px" height="300px" />
</body>
<script type="text/javascript">
window.onload = function(e) {
zlazyLoad()
}
function zlazyLoad() {
var doms = document.querySelectorAll('img[data-src]');
doms.forEach(function(node) {
var rect = node.getBoundingClientRect(),
viewHeight = document.documentElement.clientHeight;
if (node.getAttribute('data-src') === '') return;
if (rect.top < viewHeight && rect.bottom >= 0) {
console.log('show')
var src = node.getAttribute('data-src');
console.log(src)
node.setAttribute('src', src)
}
})
}
//谷歌下的滚动监听
document.addEventListener('mousewheel', function(e) {
console.log(e.wheelDelta)
zlazyLoad();
}, false)
//火狐下的滚动监听
document.addEventListener('DOMMouseScroll',function (e) {
console.log(e.wheelDelta)
},false)
</script>
</html>
效果：
