懶加載js實現和優化

時間 2019-11-08

原文原文鏈接

1.懶加載的做用和原理javascript

　　在咱們展現多圖片的場景下，相似淘寶或者百度圖片，因爲圖片的數目過多，所有從服務器請求會給用戶糟糕的用戶體驗，爲了提高用戶體驗，咱們這裏使用懶加載，隨着下拉逐步加載。html

　　每一個圖片的src會有一個get請求，咱們把不能看到的圖片src設置爲相同的圖片，這些圖片發一次請求便可，設置屬性data-src爲真正的圖片路徑。當圖片滾動到可視區，咱們就用js把data-src 賦值給 src，簡單的懶加載就能夠實現了。java

2.簡單的js實現懶加載服務器

//你須要一張timg.png圖片函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> img{ display: block; width: 700px; height: 400px; } </style>
</head>
<body>
    <ul class="img-group">
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg"></li>
    </ul>
<script type="text/javascript"> let imgArr = document.querySelectorAll('img'); let len = imgArr.length;
        window.onscroll = function () { let seeHeight = document.documentElement.clientHeight; console.log("seeHeight ="+seeHeight); let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop; console.log("scrollTop ="+scrollTop); for(let i=0; i<len; i++){ console.log(imgArr[i].offsetTop); if(imgArr[i].offsetTop < seeHeight + scrollTop){ if(imgArr[i].getAttribute('src')=='timg.jpg'){ imgArr[i].src = imgArr[i].getAttribute('data-src'); } } } } </script>
</body>
</html>

咱們根據js代碼分析一下，主要有兩部分優化

1>.如何加載圖片? spa

　　　img.src = img.getAttribute('data-src');.net

2>.如何判斷是否在可視區3d

　　　　就是圖片的 offsetTop < scrollTop + clientHeigth 便可code

好了上面就是咱們簡單的js實現和原理，可是看到各位大佬提到這裏有三個須要優化的地方。

1.在初始條件下，應該有圖片顯示，只要在加載完畢以後滾動以前執行圖片的加載便可

2.函數節流，但咱們在高頻度的滾動時，每隔一段事件開始圖片的渲染。實現原理是加入一個開關變量, 控制每隔固定的一段時間,函數纔可能被觸發

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            display: block;
            width: 700px;
            height: 400px;
        }
    </style>
</head>
<body>
    <ul class="img-group">
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158197&di=8845befd9fbda1e99e565b9c2298be50&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1503%2F626-15031G42255b3.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=4a38d248001c145c5b4dd31474dedf41&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130512%2F11178195_152908769116_2.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=b39e8b14d214b7aa518d7a8328939efb&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20141114%2F12%2F4567377520141114124637053.jpg%3F1024x684_120"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158196&di=f2e7a6ffbfa3f92025c91e6180b5e317&imgtype=0&src=http%3A%2F%2Ffile31.mafengwo.net%2FM00%2F3F%2F26%2FwKgBs1gXBQuAPWGGABOK4vbGpt412.groupinfo.w600.jpeg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=6a073a070b9cea1214efc0994ed6dde1&imgtype=0&src=http%3A%2F%2Fimages3.ctrip.com%2Fwri%2Fimages%2F200610%2F100602312604121954734.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=a9436d83f55b301d1df9cd24f6e367e7&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F69015%2F1379755311203p184vt4juft5p1t8q1andgp5ijn11.jpg"></li>
        <li><img src="timg.jpg" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497274158195&di=2b6bc6b871d4f7f267169dfcfb727f84&imgtype=0&src=http%3A%2F%2Fcyjctrip.qiniudn.com%2F106357%2F1395933091608p18k21ek6kvj1gv2ta910kn1002m.jpg"></li>
    </ul>
<script type="text/javascript">
        let imgArr = document.querySelectorAll('img');
        let len = imgArr.length;
        let n = 0; //記錄加載圖片的位置，避免從第一張開始加載
        let canrun = true;
        let seeHeight = document.documentElement.clientHeight;
        console.log("seeHeight ="+seeHeight);

        lazyLoad();
        window.onscroll = function () {
            if(!canrun){
                return ;
            }
            canrun = false;
            setTimeout(function () {
                console.log('*****');
                lazyLoad();
                canrun= true;
            },1000);

        }

        function lazyLoad() {
            let scrollTop =  document.body.scrollTop || document.documentElement.scrollTop;
            console.log("scrollTop ="+scrollTop);
            for(let i=0; i<len; i++){
                console.log(imgArr[i].offsetTop);
                if(imgArr[i].offsetTop < seeHeight + scrollTop){
                    if(imgArr[i].getAttribute('src')=='timg.jpg'){
                        imgArr[i].src = imgArr[i].getAttribute('data-src');
                    }
                    n = i+1;
                    console.log("n="+n);
                }
            }
        }
</script>
</body>
</html>

這是以上的兩個優化以後的代碼。

相關標籤/搜索

每日一句

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