Событие прокрутки jQuery - обнаружение прокручиваемого элемента - низкая производительность в Chrome

Question

Следующий код работает нормально на IE и Firefox, но Chrome ненавидит его (он работает, но очень запаздывает).Я уверен, что это можно сделать более удобным для браузера, но как?itemPlaceholder - это сотни плавающих делителей размером 100x100 (например, заполнители изображений).Я использую 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;
}

Редактировать: Заменить append на replaceWith в противном случае мы получим множество изображений, добавленныхтот же элемент.

Answer 1

Это медленно работает в Chrome, потому что Chrome запускает событие onscroll непрерывно при прокрутке страницы (IE и Firefox запускают прокрутку только при остановке прокрутки).

В этом случае можно улучшить производительность chrome, поставив в очередьвызовы ReplaceVisible и позволяющие запускать его только один раз за определенный период времени.Пример вызова очереди доступен здесь (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;
}