2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!
Fork me on GitHub

页面图片懒加载原理

图片懒加载

演示代码：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="width: 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>

效果：

posted on 2017-01-19 16:50  qize  阅读(1822)  评论(2)  编辑  收藏  举报

导航