javascript - DOM 不显示动态添加的图像

Question

我有一个包含大量图像和无限滚动的页面。因此，我想在图像离开视口(viewport)时丢失图像，然后在滚动回视口(viewport)时再次显示它们。

这是一个示例图像并持有 div:

<div class="imgHldr2" data-content="<img src=/path/to/my/image.jpg class=wImage>">
  <img src=/path/to/my/image.jpg class=wImage>
</div>

当类 imgHldr2 的元素离开视口(viewport)时，我隐藏图像，然后从 data-content 内容重建它。

除了将图像添加回 DOM 时它不渲染/显示之外，一切都完美地工作。我的做法如下:

$(window).scroll(function() {
  if(timer) {
    window.clearTimeout(timer);
  }

  timer = window.setTimeout(function() {

    $(".imgHldr2:below-the-fold").each(function() {
      $(this).next('.wImage').detach();
    });
    $(".imgHldr2:above-the-top").each(function() {
      $(this).next('.wImage').detach();
    });
    $(".imgHldr2:in-viewport").each(function() {
      // the next line puts the content back in as I can see it in inspector
      // but it doesn't actually redraw it
      $(this).append($(this).data('content'));
    });

  }, 350);
});

Answer 1

尝试使用 var 关键字。

$(window).scroll(function() {
  if(timer) {
    window.clearTimeout(timer);
  }

    var timer = window.setTimeout(function() {

    $(".imgHldr2:below-the-fold").each(function() {
      $(this).next('.wImage').detach();
    });
    $(".imgHldr2:above-the-top").each(function() {
      $(this).next('.wImage').detach();
    });
    $(".imgHldr2:in-viewport").each(function() {
      // the next line puts the content back in as I can see it in inspector
      // but it doesn't actually redraw it
      $(this).append($(this).attr('data-content'));
    });

  }, 350);
});

这是 fiddle :http://jsfiddle.net/gd7cokyy/(在 fiddle 中它添加元素，但不会删除它们。)可以在下面的讨论中找到原因的解释。

但是，行 if(timer) { window.clearTimeout(timer); } 是不必要的。实际上，你为什么要使用那个计时器？

$(window).scroll(function() {    
    $(".imgHldr2:below-the-fold").each(function() {
      $(this).next('.wImage').detach();
    });

    $(".imgHldr2:above-the-top").each(function() {
      $(this).next('.wImage').detach();
    });

    $(".imgHldr2:in-viewport").each(function() {
      $(this).append($(this).attr('data-content'));
    });
});

您还应该使用jquery的remove()方法而不是detach()。

我还会考虑更改 HTML 的结构，将 html 存储在属性中从来都不是一个好的做法。此外，如果您只想存储图像的 src，则可以仅存储该值。你的方式:

<div class="imgHldr2" data-content="<img src=/path/to/my/image.jpg class=wImage>">
  <img src=/path/to/my/image.jpg class=wImage>
</div>

正确的方法:

<div class="imgHldr2" data-img-path="/path/to/my/image.jpg">
  <img src="/path/to/my/image.jpg" class="wImage">
</div>