jQuery滾動事件 - 檢測元素滾動到視圖中 - Chrome上的性能不佳

Question

以下代碼在IE和Firefox上運行正常，但Chrome討厭它（它運行但是非常滯后）。 我相信它可以使瀏覽器友好，但如何？ itemPlaceholder是數百個100x100浮動div（例如圖像占位符）。 我正在使用jquery 1.4.4和Chrome v10.0.648.127。

$(function () {

   ReplaceVisible();
   $(this).scroll(function () {
      ReplaceVisible();
   });
});

function ReplaceVisible() {
    $('.itemPlaceholder').each(function (index) {
        if (HasBeenScrolledTo(this)) {
            $itemPlaceholder = $(this);

            $itemPlaceholder.replaceWith('<img src="bicycle.jpg" />');
        }
        else {
            return false;
        }
    });
}

function HasBeenScrolledTo(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;

    return elemTop < docViewBottom;
}

編輯：用replaceWith替換append ，否則我們replaceWith大量圖像附加到同一元素。

Answer 1

這在chrome中運行緩慢，因為chrome會在頁面滾動時連續觸發onscroll事件（IE和firefox僅在滾動停止時觸發onscroll）。

在這種情況下，您可以通過排隊ReplaceVisible的調用來提高chrome的性能，並且只允許在給定時間段內觸發一次。 這里有一個排隊調用的例子（ https://github.com/tilleryj/rio/blob/master/public/javascripts/lib/delayed_task.js ）

Answer 2

我有一個類似的問題，我必須檢測調整大小事件，因為你期望解雇他們很多並鎖定瀏覽器。 我沒有測試過，所以請報告它是否有效。 :)

$(function () {
   replaceVisible();
   $(this).scroll( replaceVisible );
});

var replaceVisible = (function(){
    var last_scroll = null;    // Last time we scrolled
    var paused = false; // We've paused scrolling
    var delay = 1000; // Delay in between acting on the scroll (ms).
    return function(){
        if( paused ) return;
        if( new Date() - last_scroll < delay ){
            setTimeout( function(){ paused = false; replaceVisible(); }, delay )
            paused = true;
        }
        $('.itemPlaceholder').filter(HasBeenScrolledTo)
            .replaceWith('<img src="bicycle.jpg" />');
        last_scroll = new Date();
    }
})();

function HasBeenScrolledTo(index) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(this).offset().top;
    return elemTop < docViewBottom;
}