頁面圖片懶加載原理

時間 2019-11-17

標籤頁面圖片加載原理简体版

原文原文鏈接

圖片懶加載

演示代碼：lazyloadjavascript

在這方面大名鼎鼎的jQuery插件:jquery.lazyload.js,是咱們作頁面懶加載優化的首選。固然大神的源碼也很簡潔。html

原理實現

本人不才，請忽略本人的粗鄙代碼(兼容性，完備性，健壯性可自行實現)，重在思路。java

判斷圖片是否在可視區域內

圖片加載的時機，就是圖片出如今瀏覽器的窗口可視區域內。node

這裏咱們能夠經過下面代碼來判斷圖片是否出如今了符合條件的區域內。jquery

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
    //符合條件可加載圖片
}

這裏須要說明的幾個點：git

第二列中的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>

效果：
github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。