30+ jQuery Lazy Load Plugins
jQuery Lazy Load Plugins – Are you looking for jQuery Lazy Load Plugins, If yes then in this post I am going to share hand-picked jQuery Lazy Load Plugins for you. Lazy loading is a technique to delay loading of images/videos on the webpage without interrupting loading of complete page. It is a useful and necessary feature as it improves page load time and gives better user experience. You can use these jQuery Lazy Load Plugins in your next web based projects.
jQuery Lazy Load Plugins
Following are the list of jQuery Lazy Load Plugins.
Lazy Load Images – DEMO
Lazy load images by initially loading a low res version and then replacing it with a higher res version once the page is done loading.
Lazy loading with inline SVG – DEMO
Lazy loading with inline SVGs. Using inline SVGs to create lightweight thumbnails that creates a better before experience compared to blurred rendered thumbnails.
Lazy Load for Background Images – DEMO
UPDATE (3/23/18) – since people are still looking at this, I’ve made an updated fork that uses the Intersection Observer API for better performance (with polyfill). I’ve also updated it to use JS to load the image off screen, which allows us to wait to start the transition until we know the image is loaded. Yay better perf + animation
Lazy load background-images – DEMO
Function to lazy load background-images
Lazy Load on Scroll – DEMO
Lazy Load on Scroll demonstration with the lightweight JS PLugin Unveil by LuÃs Almeida Thanks!
Ajax Lazy Load with AngularJS – DEMO
Quickly put together lazy load of a JSON feed using AngularJS.
Lazy Load with IntersectionObserver API – DEMO
Lazy-load AddThis – DEMO
For some reason clients love AddThis. Yeah, it’s easy to add to the page and saves time on fiddling with custom API calls, but it totally destroys page performance! Here’s a trick to lazy-load it asynchronously.
“Simple” lazy load images – DEMO
https://deanhume.com/home/blogpost/lazy-loading-images-using-intersection-observer/10163
Lazy loading using blazy – DEMO
Submission for the codepen blogging challenge #03: Figure and figcaption. Used the blazy library for lazy loading images, configured blazy to use different images for mobile and desktop. Enjoyed working with it!
Lazy Load Google Maps API (jQuery) – DEMO
Lazyload the Google Maps API, using data attributes for lat/long, responsive map canvas.
Lazy Load – DEMO
Lazy Load demonstration.
Lazy Load Simulation – DEMO
Simulating lazy load on-click to generate additional “results” for HTML mockup purposes. Created to look like Fuel UX Infinite Scroll option.
Lazy load based on waypoints.js – DEMO
Intended for adaptive image load – Hence the noscript implementation
Lazy loading images – DEMO
Lazy loading images with Cloudinary & lazysizes http://cloudinary.com https://github.com/aFarkas/lazysizes
Lazy Load XT Demo – DEMO
Demo how images load through the Lazy Load XT plugin
Performant lazy-load technique for 2018 – DEMO
Utilises the new Intersection Observer API. Which has zero jank and runs at the full 60fps using ultra lightweight vanilla JavaScript.
Lazy Loading Logos – DEMO
Replacing – with javaScript – a small inline SVG data URI with only embedded text inside on the src-tag with the url of the external image stored in a data-attribute.
maCSSonry grid layout by @kseso – DEMO
CSS Grid Layout as masonry with ‘grid-auto-flow: dense’. Look at number of pics and the empty spaces inside grid when initial/dense value changes
Dominant Color Lazy Loading – DEMO
Inspired by Medium’s website.
Slick + Photoswipe Image Gallery & Zoom – DEMO
A responsive, lazy loading, photo gallery and zoom using Slick Slider and Photoswipe.
DADI / CDN: Lazy loading images with placeholders – DEMO
Lazy loading images – DEMO
NEW VERSION! Vanilla JavaScript! See: http://codepen.io/Merri/pen/WbEWgP Didn’t see any approaches that would be short in HTML syntax which would also account for JavaScript not being enabled.
OWL Lazy Load – DEMO
Masonry layout Pure #CSS Grid + lazy-load v.2 by @kseso – DEMO
Now with Lazy-Load images (javasacript made by Furoya)
Lazy Loading with Intersection Observer Example – DEMO
Lightbox without JS, with lazy load – DEMO
A simple Lightbox made without JavaScript. It simply works with :focus pseudo-class on the trigger element.
Angular Lazy Load – DEMO
bLazy.js – horizontal scroll example – DEMO
Lazy load images, horizontal page
IntersectionObserver – lazy-loading – DEMO
Lazy loading list items – DEMO
I’m slicing the first 20 elements and hiding the rest. When the list height plus the list scrollTop is higher than the container it’s in, it runs the next function which slices the min to max variables and fades in those items.
Lazy Loading Example – DEMO
Infinite Scroll Lazy Loading Gallery With Simple jQuery – DEMO
A present for February by @Xilantra. Working in progress!
Lazy Loading Fig+Figcaption & Flipping Card – DEMO
Figure & Figcaption combo with some extra features in the form of a short description added on hover of the caption and the back side of the figure for a full description. Can be used in a portfolio to showcase both the work and an extensive description in a relatively small space.
Lazy loading video iframe with placeholder – DEMO
Lazy load video iframes like youtube, vimeo etc. data-width and data-height are optional. They set the aspect-ratio for the placeholder to match the video.
Loading Effect for Items and Picture Lazy Load – DEMO
Show items in with a css3 animation once they are in the viewport. Example of a new Html5 Picture with Lazy Load.
I Hope you liked Hand-picked list of jQuery Lazy Load Plugins, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.
