Speedup suggestions

[pijulius]

Hi Tuupola,

Thanks for this jQuery script, works just perfectly and love the placeholder option :) just two notes if I may which are related to speeding things up, not sure if there are any good but please have a look on it and maybe you will find them useful.

1 . Remove loaded element from the elements lists so scrolling will be much faster and less resource hungry as right now even if all images loaded scrolling will always call update() and that goes trough the elements even if they are loaded.

I tested this with 200+ images and did a Performance test on scrolling and Total cost went down from ~60% to ~5%

    function update() {
        if (elements.length <= 0)
            return;

        var counter = 0;

        for(var i = 0; i < elements.length; i++) {
            var $this = $(elements[i]);
            if (settings.skip_invisible && !$this.is(":visible")) {
                return;
            }
            if ($.abovethetop(elements[i], settings) ||
                $.leftofbegin(elements[i], settings)) {
                    /* Nothing. */
            } else if (!$.belowthefold(elements[i], settings) &&
                !$.rightoffold(elements[i], settings)) {
                    $this.trigger("appear");
                    /* if we found an image we'll load, reset the counter */
                    counter = 0;
                    elements.splice(i, 1);
                    i--;
            } else {
                if (++counter > settings.failure_limit) {
                    return false;
                }
            }
        };
    }

2 . Calling update() with timeout on scroll event will speed up scrolling too but also the best it will allow you to quickly jump to the bottom of the list (or any part of it) by grabbing the scrollbar without lazyload to start loading images in wain.

    var timeout;
    if (0 === settings.event.indexOf("scroll")) {
        $container.bind(settings.event, function() {
            clearTimeout(timeout);
            timeout = setTimeout(function() { update(); }, 100);
            return false;
        });
    }

Hope you will find the above things useful and thanks again for the plugin!
Regards,
Julius

[tuupola]

Looks good. Can you make a pull request for these? If not I can also copy paste them in.

[matthendrix]

+1 for this fix. I noticed a massive improvement in speed for my page which has 100+ images.

[huan086]

Add the timeout for resize too

    /* Check if something appears when window is resized. */
    $window.bind("resize", function() {
        clearTimeout(timeout);
        timeout = setTimeout(update, 100);
    });

[jakob-stoeck]

The throttling above would not lazy load while scrolling but only when you stop scrolling. That of course is much faster but also does not load the images :) I added a pull request which throttles the requests to 0.25 seconds.