Menu
I'm looking for a JQuery plugin that supports lazy loading images. The Lazy Load JQuery plugin is no longer supported and does not work in Firefox.
Does anyone know a good alternative that supports most modern browsers?
I'm also open to other approaches. I have a hidden div with images that I don't want to load unless the div is made visible. Let me know if there are better approaches to deferring the image load in this situation.
302
And now the question is: when it's recommended to use lazy loading? You should always use lazy loading for the images below the fold. As we explained, lazy loading will reduce the real and perceived loading time. User experience will benefit from it — and you users will thank you.
vanilla-lazyload is a lightweight option for lazy-loading images, background images, videos, iframes, and scripts. It leverages Intersection Observer, supports responsive images, and enables browser-level lazy loading.
With browser lazy loading, you only need to add a loading attribute with a value of lazy to the img tag in the HTML markup. Put simply, all you need to do is tell the browser which images to lazy load. No JavaScript, APIs, or calculations required.
Lazy-loading images and video reduces initial page load time, initial page weight, and system resource usage, all of which have positive impacts on performance.
I encountered a similar situation in a tab style page where the content in initially invisible tabs was downloading unnecessarily. The solution I went with was to create markup like:
<img src="#" data-src="/img/foo.png"/>
and then in the javascript that handles the tab transitions I also substituted the "data-src" attribute into the "src" attribute of those images.
$thisTab.find('img[data-src]').each(function(img) {
var $img = $(img);
$img.attr('src', $img.attr('data-src'))
.removeAttr('data-src');
});
This accomplishes the goal of only loading the images when the tab is selected, and is valid html5!
155
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
