iOS scroll issue

[cihadhoruzoglu]

Hi,

This is great for desktop but when i try it on iPad it is kinda different. When you scroll, this plugin waiting stop scroll and then showing images.

Is there a solution to fix this?

Thanks.

[jasonday]

Our team looked at a lot of different ways to resolve this, none of which is satisfactory or actually work. The issue is that iOS will block the "paint" of the page during scroll no matter what you do in the javascript.

We finally came up with a workaround that we don't love, but it works.

We initiate $.jail on page load (normal functionality) then if there are additional images in the stack, we load them with $.jail in increments (we use an increment of 8), using a timeout of 250ms until the stack is complete. This approach doesn't affect initial page load - so the performance is still there, and the user rarely ever sees the actual lazy loading process (which improves usability - performance behind the scenes). I can post our code if anyone is interested.

[sebarmeli]

Thanks Jason, that's great! Yeah it would be awesome if you could post the code.

[jasonday]

This breakdown is with a prior version of $.JAIL, as in the short time frame we were given to work on this issue we were unable to get our changes to work with the latest version. So additional testing would be needed to integrate this with the latest.

Additional options:

partialLoad : 8,
partialMax : 48,
partialTimer : 250,

Within the later method:

if ( !isNaN(options.partialLoad) && options.partialLoad > 0 ) {
    setTimeout( function() { $.asynchImageLoader._partialCallback(images, options); }, options.partialTimer);
}

Added new method:

_partialCallback : function(images, options) {
        // Added to support
        var i, ilen = images.length;

        if ( ilen && ilen < options.partialMax ) {
            // Loop over the next options.partialLoad images (or to the end)
            for ( i = 0; i < ilen && i < options.partialLoad; ++i ) {
                $.asynchImageLoader._loadImage(options, $(images[i]));
            };
            // Remove loaded images from the stack
            $.asynchImageLoader._purgeStack( images );
        }

        // Are there any left?
        if ( images.length ) {
            // Do it again
            setTimeout( function() { $.asynchImageLoader._partialCallback(images, options); }, options.partialTimer);
        }
    },