回追加到DOM分离

后，我有回追加到DOM分离

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

的高度不同，它是一个砖石布局的典型的HTML结构。

我想做的事情是，当页面滚动时它会从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()); 
}); 
});

任何想法，为什么这是失败？有一个更好的方法吗？

来源

2014-09-27 Darren Sweeney

当卸下你有实际存储的元素的引用，否则就不见了

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

// stuff 

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

我会离开搞清楚如何结合起来，与那些伪选择由您决定。

另一个问题是，一旦元素被分离，它不再在DOM中，因此它没有父元素，所以$(this).parent()什么都不做。

看起来这将是很多容易，只需隐藏和显示的元素，而不是从DOM删除它们吗？

来源

2014-09-27 20:08:46 adeneo

这是一个性能问题，因为它使用无限滚动...当主外部达到20000px或更多的浏览器是不可能的与DOM中的所有imges呆滞 – 2014-09-27 20:12:22

但是，如果元素在第一页上的DOM中存在，它确实有助于稍后移除它们。我不这么认为，并且会认为懒加载是你真正需要的，而不是删除任何不在视口中的东西，因为在许多情况下，也会弄乱布局和滚动条。 – adeneo 2014-09-27 20:14:54

我检查了页面有无图像，差异在滚动和滞后方面很大。没有图像，几乎没有任何滞后。至于搞乱布局等，我会将图像放在与图像大小完全相同的div中，因此没有任何变化。 – 2014-09-27 20:17:14

回追加到DOM分离

回答

相关问题