回追加到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分離

回答

相關問題