Menu
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!
681
Why go for lazy loading images at all? Lazy Loading defers the loading of an image that is not needed on the page immediately. An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually becomes visible.
IMG tags can leverage native browser lazy loading, which doesn't require any JavaScript. You can still lazy load background images if they're in HTML as an inline style. Plugins like FlyingPress automatically detect and lazy load them.
If you want to test the execution of lazy loading, I can recommend that you clear your browser's cache and try reloading. In Chrome's Developer Console (F12), you can tweak the speeds and simulate modem speeds. Hit F12 -> Network tab -> Change the "No throttling" dropdown . Choose a slower speed to experiment.
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.
skip_invisible to false.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
