jquery - LazyLoad images not appearing until after a scroll

Question

I'm using the lazyload plugin for jQuery.

It's working fine, except one issue: The images src is not being swapped out for the data-original until you scroll. Once you scroll, even a tad, the images load - but I need them to load right when the page is ready.

A note: This is purely a Chrome/Safari Issue. I am not having this issue in Firefox or Opera, or even IE9.

I've tried following the suggestion of this post: http://sumanrs.wordpress.com/2011/02/08/jquery-lazy-loading-images-no-scrolling/ Which states that the basic jQuery library has the capabilities of lazy loading without a plugin needed. This seemed not to be so, as the images just all loaded on initial page load.

Any insights are greatly appreciated!

Answer 1

Your images most likely do not have width and height set. Webkit browsers will see images on document.ready with zero width and height. This means jQuery will consider the images invisible. Lazy Load ignores invisible images by default. You have three options.

1. Fix HTML to have width and height attributes on images.
2. Set skip_invisible to false.
3. Use atleast version 1.8.3 of the plugin.