原生js如何實現懶加載？

時間 2019-11-24

原文原文鏈接

前言：關於懶加載這個問題呢，是我大三暑假接到的一個電話面試問到的問題，當時我回答了大體的思路，可是極其含糊，離真正的實現仍是有差距的，現在過了快一年了，如今我就來實現一下吧~html

原理: 原理很簡單，咱們不用想的很複雜。就是讓img的src爲空，圖片的真實地址能夠存儲在img一個自定義的屬性裏，就好比date-src吧，等到目標圖片出如今視野了，把data-src裏的值賦給src。面試

實現懶加載必備知識：bash

上面提到自定義屬性，那麼如何獲取自定義屬性呢？用getAttribute（屬性名）ui

除此以外，咱們還須要知道clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop的區別以及所表明的含義，說實話，我本身也很模糊，每次使用的時候都須要查一下，相信不少人也跟我同樣，那具體的我這裏就不細說了，我查看了一些博客，以爲有一篇寫的挺好，這裏我直接上圖（別問我爲何，由於我懶~）spa

這裏我把這篇文章的地址給你們： www.cnblogs.com/libin-1/p/5…code

那麼下面我將把本身的代碼直接展現出來：cdn

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圖片懶加載</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            display: block;
            width: 400px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="" date-src="../images/1.jpg" date-h="300" alt="">
    <img src="" date-src="../images/2.jpg" date-h="300" alt="">
    <img src="" date-src="../images/3.jpg" date-h="300" alt="">
    <img src="" date-src="../images/4.jpg" date-h="300" alt="">
    <img src="" date-src="../images/5.jpg" date-h="300" alt="">
    <img src="" date-src="../images/bird.png" alt="">
    <script>
        var imgs=document.getElementsByTagName("img");
        var n=0;//用來記錄當前是第幾張圖片
        var seeHeight = document.documentElement.clientHeight;
        var h = imgs[0].getAttribute('date-h');
        // console.log(h);
        var index = Math.floor(seeHeight/h);//一進頁面展現的幾張圖片
        for(i=0;i<=index;i++){
            imgs[i].src = imgs[i].getAttribute('date-src');
        }
        window.onscroll = function(){
            for (var i = n; i < imgs.length; i++) {
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                if (imgs[i].offsetTop < seeHeight + scrollTop) {
                    if (imgs[i].getAttribute('src') == '') {
                        imgs[i].src = imgs[i].getAttribute('date-src');
                    }
                    n = i + 1;
                    console.log('n = ' + n);
                }
            }
        }
    </script>
</body>
</html>


複製代碼

總之：但願大佬們多多指教，給點意見~htm

相關標籤/搜索

每日一句

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