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 属性中。

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

如何做到这一点？我的代码有什么问题吗？我的 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" />

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