javascript在滾動上加載圖像

Question

我只想使用javascript構建自己的惰性圖像 。

到目前為止，這是我的代碼：

<img src="images1.jpg" data-src="images2.jpg" />

var body = document.body,
    html = document.documentElement;

var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
    screen = screen.height; 
    img = document.getElementsByTagName("img");

    window.addEventListener("scroll", function() {

    for(var i = 0; i < img.length; i++) {

        if (img[i].clientHeight >= height - screen) {

        var data = img[i].getAttribute("data-src");
        img[i].setAttribute('src','');
        img[i].setAttribute("src", data);
        }
    }
    });

問題是，滾動事件時圖像data-src沒有執行到src屬性中。

我希望它在視口之前約200像素的圖像時執行。

該怎么做？ 我的代碼怎么了？ 我的if條件是否可能不正確？

Answer 1

您的代碼可以正常工作，您需要添加}); 最后。

 var body = document.body, html = document.documentElement, height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight), screen = screen.height; img = document.getElementsByTagName("img"); window.addEventListener("scroll", function() { for(var i = 0; i < img.length; i++) { if (img[i].clientHeight >= height - screen) { var data = img[i].getAttribute("data-src"); img[i].setAttribute('src', data); } } }); 

 <img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-1&w=350&h=250" /> <img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-2&w=350&h=250" data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-2&w=350&h=250" /> <img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-3&w=350&h=250" /> <img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-4&w=350&h=250" data-src="https://placeholdit.imgix.net/~text?txtsize=63&bg=63FF47&txtclr=ffffff&txt=Image-4&w=350&h=250" /> 

我看不到“視口之前200像素”的含義。 您能更好地解釋一下嗎？ 如果您不希望同時更改所有圖像，則應考慮每個圖像的offetTop和scrollTop位置。 http://jsbin.com/xexeho/edit?html,js，輸出

Answer 2

如果您可以提及圖像的尺寸，那將更有意義。 但是，我仍然試圖嘗試回答您的問題，因為我認為代碼中的滾動事件根本沒有觸發。 嘗試將img標簽設置在視口下方，以便滾動

對於計算也使用window.innerHeight，因為它給出了視口的正確高度減去地址欄的高度等。

<img src="images1.jpg" data-src="images2.jpg" style="position:absolute;top:1169px"/>
<script>
    var body = document.body,
        html = document.documentElement;

    var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
        screen = window.height;
        img = document.getElementsByTagName("img");

    window.addEventListener("scroll", function() {
        console.log("Checking if the scroll event is triggered...");
        for(var i = 0; i < img.length; i++) {

            if (img[i].clientHeight >= height - screen) {
                var data = img[i].getAttribute("data-src");
                img[i].setAttribute('src','');
                img[i].setAttribute("src", data);
            }
        }
    });
</script>

要么

嘗試使用鼠標滾輪和/或DOMMouseScroll之類的事件，它們不希望主體實際可滾動。

希望這可以幫助！

Answer 3

托德座右銘的延遲加載插件的簽出源 。 查看其他實現非常有用。