Fix: Initial scroll needed in chrome version 22.0.1229.94 to load imgs

[ItsMeAra]

https://github.com/tuupola/jquery_lazyload/pull/48# 
Was still happening for me.
In Chrome version 22.0.1229.94 if page loaded and images were in view it would not load images until an initial scroll was made.
I wrapped the initial update() call around a window.ready and it seems to have fixed it.

[ItsMeAra]

Actually it seems like it might still be having the issue.

Changing it back to document.ready and adding window.scrollTo(0,1); inside seems to do the trick. Although this is probably not the greatest solution.

$(document).ready(function() {
update();
window.scrollTo(0,1);
});

[tuupola]

Does it happen everytime or just sometimes? I have seen this happen but then again it does not happen with all pages. I have hard time tracking the reason...

[ItsMeAra]

Seems the other fix i mentioned isn't really fixing it either.

It only happens once the very first time. if i close the tab and hit the page again in a new tab it does it again. But if i reload the page in the current tab it doesnt do it and works fine.

[tuupola]

@AraLA22 What is the URL of the page you have problems with? Does it also happen to you in the demo pages. This is a really hard to track bug.

[abrambailey]

I'm having the same problem on my local app.. the demo page loads fine though. Latest version of Chrome on Linux. The same page is loading perfectly in FF, but when I sort my jquery datatable the new images don't turn up until I scroll. However, they do load on sort in Chrome without a scroll. Weird.

Ok, I've sorted it out. Must have had to do with js load times for datables. Just added:

setTimeout(function(){window.scrollTo(0, 1);}, 100);

Actually, better yet, you can just toss the lazyload function into a draw callback within the datatables initializer.

"fnDrawCallback": function( oSettings ) {
    $("img.lazy").lazyload({effect : "fadeIn"});
}

Sorry, hoping all this will help the next confused person.

[amanjaura]

I am having the same issue in chrome and safari. Tried all the methods mentioned above. None has worked so far.

[tuupola]

@amanjaura URL of the page you have problem with? Do you have the same problem with demo pages?

[tuupola]

@funkdified I am surprised it works automagically with FF. If you alter your page with JavaScript (tabs, sorting etc) Lazy Load needs to be notified when the change happens. Notification usually happens with the callback method of the other plugin you are using. Lazy Load only monitors the event it was configured to monitor. Default being the scroll event.

[amanjaura]

@tuupola the URL is www.studica.com if you load the page on safari or chrome the images will not show up until you scroll initially. The demo page does not seem to give any issues.

[tuupola]

@amanjaura Might not be related but you should init plugin only once. Now you are doing it twice. Below is copy paste from you code:

    $("img.lazy").show().lazyload();
    $("img.lazy").lazyload({ threshold : 300 });

[amanjaura]

@tuupola Can I use it the following way instead? From the examples I figured that one was to initialize the plugin and the 2nd command was to set the threshold to 300px

$("img.lazy").show().lazyload({ threshold : 300 });

[tuupola]

@amanjaura Yes of course. Also as always with jQuery plugins you should initialize them inside document ready event.

$(document).ready(function() {
    /* Init plugins here. */
});

or the shortcut

$(function() {
    /* Init plugins here. */
});

Refer to jQuery documentation on how ready event works.

[amanjaura]

@tuupola tried that as well, still doesn't resolve the issue.

[ghost]

Eagerly looking forward to a fix for this problem :)

[batizhevsky]

chome + mac. At page without scroll hack not work. wait new fix

[tuupola]

@leonko URL of the page you have problems with?

[iambatt]

@tuupola I am having the same issue in Chrome + Opera. [edit: just started working in Opera which is odd]

page is here: www.ianbatt.eu/project01.html

[tuupola]

@leonko @radiohalo5 @amanjaura @iambatt Can you try 1.8.3 to see if it fixes the problem.

[tuupola]

@iambatt PS. In your page you are including two different versions of jQuery. Probably a bad idea. Also you should call Lazyload with $("img.lazy").lazyload({...}). There is no point calling $.show() unless you are using noscript fallback hack.

[tuupola]

Should be fixed in latest. In problem still persists either add width and height to image tags or set skip_invisible to true.