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

admin管理员组

文章数量:1321439

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.

• javascript
• jquery
• dom
• google-chrome
• scroll

Share Improve this question Follow edited Mar 11, 2011 at 9:57 Sprintstar asked Mar 10, 2011 at 23:46 SprintstarSprintstar 8,16966 gold badges4040 silver badges5151 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: 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;
}

本文标签： javascriptjQuery scroll eventdetecting element scrolled into viewpoor performance on ChromeStack Overflow