最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - jQuery scroll event - detecting element scrolled into view - poor performance on Chrome - Stack Overflow

programmeradmin2浏览0评论

The following code works ok on IE and Firefox, but Chrome hates it (it runs but is really laggy). I am sure it could be made more browser friendly, but how? itemPlaceholder is hundreds of 100x100 floated divs (eg image placeholders). I'm using jquery 1.4.4 and 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;
}

Edit: Replaced append with replaceWith otherwise we get lots of images appended to the same element.

The following code works ok on IE and Firefox, but Chrome hates it (it runs but is really laggy). I am sure it could be made more browser friendly, but how? itemPlaceholder is hundreds of 100x100 floated divs (eg image placeholders). I'm using jquery 1.4.4 and 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;
}

Edit: Replaced append with replaceWith otherwise we get lots of images appended to the same element.

Share Improve this question edited Mar 11, 2011 at 9:57 Sprintstar asked Mar 10, 2011 at 23:46 SprintstarSprintstar 8,1696 gold badges40 silver badges51 bronze badges 0
Add a ment  | 

2 Answers 2

Reset to default 5

This runs slowly in chrome because chrome fires the onscroll event continuously as the page is scrolled (IE and firefox only fire onscroll when scrolling stops).

You could improve chrome's performance in this case by queuing up the invocations of ReplaceVisible and only allowing it to be fired once in a given time period. An example of queuing invocations is available here (https://github./tilleryj/rio/blob/master/public/javascripts/lib/delayed_task.js)

I had a similar problem where I had to detect resize events, which as you'd expect fired an awful lot of them and locked up the browser. I haven't tested it though, so please report back if it works. :)

$(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;
}
发布评论

评论列表(0)

  1. 暂无评论