Question

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

这是一个示例图像并持有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的元素离开视口时，我隐藏图像，然后从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);
});

这里是小提琴：http://jsfiddle.net/gd7cokyy/ （在小提琴中它添加元素，但它不会删除它们。）解释为什么可以在下面的讨论中找到。

然而，行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>

DOM未显示动态添加的图像

1 个答案: