Javascript 分离后追加回DOM

我有一个典型的html结构

<li>
  <div class="holder">
    <img src="imgSrc" class="masterImage" height="200" width="100">
  </div>
</li>

---

你知道为什么会失败吗？有更好的方法吗？

分离时，必须实际存储对元素的引用，否则它就消失了

var elements = $(".masterImage:below-the-fold").detach();

// stuff

$('body').append(elements);

我将把如何将它与那些伪选择器结合起来的问题留给你来解决

另一个问题是，一旦分离元素，它就不再位于DOM中，因此它没有父元素，因此

$（this）.parent（）不起任何作用

似乎隐藏和显示元素比从DOM中删除元素要容易得多？
这是一个性能问题，因为它使用无限滚动。。。当主外部达到20000px或更大时，浏览器不可能对DOM中的所有imges都迟钝，但是如果元素在第一次页面加载时出现在DOM中，那么在以后滚动时删除它们真的有帮助吗。我不这么认为，而且我认为延迟加载才是你真正需要的，不要删除任何不在视口中的东西，因为这在很多情况下也会弄乱布局和滚动条。我检查了有图像和没有图像的页面，在滚动和延迟方面差异很大。没有图像，几乎没有任何延迟。至于混乱的布局等，我会举行一个div的图像大小完全相同的图像，所以什么都不会改变哦，好吧！答案仍然存在，一旦图像被分离，它们就不再位于DOM中，
$（“.masterImage:in viewport”）
将找不到它们，您必须保留对分离对象的引用。
$(window).bind("scroll", function(event) {
$(".masterImage:below-the-fold").each(function() {
  $(this).detach();
});
$(".masterImage:above-the-top").each(function() {
  $(this).detach();
});
$(".masterImage:in-viewport").each(function() {
  $(this).appendTo($(this).parent());
});
});

var elements = $(".masterImage:below-the-fold").detach();

// stuff

$('body').append(elements);