Added "wait" into settings. This setting specifies the number of milliseconds wait before loading a image.

[tekezo]

Problem

When user moves to the bottom of the page with animation, all images are loaded at the same time.

For example, push "scroll to bottom" button in https://pqrs.org/tmp/jquery_lazyload/ ,
all images (assets/red1x1_000.png - assets/red1x1_029.png) are loaded while scrolling.

Solution

I've added "wait" into settings.
If "wait" > 0, a image will be loaded if it shown "wait" milliseconds continuously.

Demo:
https://pqrs.org/tmp/jquery_lazyload/index.mod.html
In this page, a image is loaded if it shown 300ms or more.

[tuupola]

You can currently achieve basically the same effect by using scrollstop event.

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

[tekezo]

Thanks for information.

With scrollstop event, images do not load entirely
while user is scrolling page slowly by holding arrow keys on PC.
Is there a workaround?

[tuupola]

If only half of the image gets loaded then for some reason server stops sending data before whole image was loaded. I cannot reproduce that behavior with example page above.

[tekezo]

Hmm, I've make same example and demo on github pages.
Could you confirm on this page?
http://tekezo.github.io/jquery_lazyload/

[tuupola]

"Issue: scrollstop version does not load images while user is scrolling page.
You can reproduce it by holding down down arrow key on PC."

That is how scrollstop event works. It fires when scrolling has stopped.

[tekezo]

That is how scrollstop event works. It fires when scrolling has stopped.

Yes.

This "wait" option approach is suitable when we want to support these slow scroll case.
(Keyboard or mouse wheel on PC.)

In my case, scrollstop method gives discomfort to the site users.
Especially, images are not loaded while momentum scrolling on OS X.
scrollstop is not usable on OS X by this reason.

I'm glad if you merge this changes.

[demos]

Before posting a new one I ask myself if my issue is the same as yours : On mobile devices, using the "touchmove" event, lazyload generates some lags (big articles with often more than 50 pictures).

So I added a 'timeout' option like this :

...
var busy = false;

    function update() {
        var counter = 0;

        if( busy )
            return;

        busy = true;
        window.setTimeout( function(){
            busy = false;
        }, settings.timeout );

...

Set to 200 ms, I have no lag anymore with a really confortable configuration :
var $window = $(window),
threshold = Math.max( $window.width(), $window.height() );

$('div.test-main, .intro .image, .main:not(.feed)').find('img').lazyload({
    event       : 'scroll touchmove',
    // effect       : 'fadeIn',
    threshold   : threshold
}); 

The lazyload is almost invisible for visitors (even with transitions on scroll) and bandwidth is well preserved.

Should I open a new issue?

Thanks in advance.

[tekezo]

@demos I guess that your change is same as enabled_timeout. What is difference?
http://www.appelsiini.net/projects/lazyload/enabled_timeout.html

[demos]

The issue comes from the touchevent or scroll event which are triggered to often if the scroll is smooth.
This is applied on each of these events and is not bound to the onload. Here is the kind of page wich required it : http://www.test-mobile.fr/tests/nokia-808-pureview-1135-2012-11-02/

Forbidding the update to occur more than each 200ms keep the scoll animation unlaggy (specially on mobile devices).