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没有在scroll事件上执行src属性。

我希望它在视口前 200px的图像时执行。

怎么做？我的代码有什么问题？我的 if condition 可能不正确吗？

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" />

我不明白“视口前的200px”是什么意思。你能更好地解释一下吗？如果您不希望所有图片同时更改，请考虑每张图片的offetTop和scrollTop位置。 http://jsbin.com/xexeho/edit?html,js,output

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>

OR

尝试使用mousewheel和/或DOMMouseScroll这样的事件，它们不期望body实际上可以滚动。

希望这有帮助！

Answer 3

从todd座右铭结帐source of lazy loading plugin。对其他实现非常有用。

javascript在滚动上加载图片

3 个答案: