Question

我有一个典型的html结构

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

高度不同，它是砖石布局。

我要做的是当页面滚动时将图像与DOM分离，然后它会从视口中移出，然后再次在视口中或第一次重新附加它。

发生的事情是图像分离正常但没有重新连接

这是JQuery库代码：

(function($) {
$.belowthefold = function(element, settings) {
    var fold = $(window).height() + $(window).scrollTop();
    return fold <= $(element).offset().top - settings.threshold;
};
$.abovethetop = function(element, settings) {
    var top = $(window).scrollTop();
    return top >= $(element).offset().top + $(element).height() - settings.threshold;
};
$.inviewport = function(element, settings) {
    return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);
};
$.extend($.expr[':'], {
    "below-the-fold": function(a, i, m) {
        return $.belowthefold(a, {threshold : 0});
    },
    "above-the-top": function(a, i, m) {
        return $.abovethetop(a, {threshold : 0});
    },
    "in-viewport": function(a, i, m) {
        return $.inviewport(a, {threshold : 0});
    }
});
})(jQuery);

这就是我如何称呼上述内容，但正如我所说，他们并没有重新连接：

$(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());
});
});

为什么会失败的任何想法？有更好的方法吗？

Answer 1

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

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

// stuff

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

我会留下如何将它与那些伪选择器结合起来。

另一个问题是，一旦元素被分离，它就不再存在于DOM中，因此它没有父元素，因此$(this).parent()没有做任何事情。

似乎很多更容易隐藏和显示元素而不是从DOM中删除它们？

分离后追加到DOM

1 个答案: