19 Useful Resources to Lazy Load Images in WordPress28th Mar 2012 | Posted by Eko S. | 6 Comments
If you have a blog post with many images inside, like design inspiration and photo showcase articles then you may feel how slow it loads. But with lazy load plugin, it can make your page load faster. When you install Lazy load plugin it only loads the image that is being accessed right away. The rest of the images load as the user scrolls down.
In this article, we have 19 useful resources to applicate lazy load plugin to your wordpress website then make your page load faster.
WordPress Advanced Image Lazy Load
Family galleries, portfolios, news reports with a lot of photos. This plugin provides a better user experience by delaying the load of images in (especially long) web pages. Images outside of the visible portion of the page that the user is viewing wont be loaded before the user scrolls down to them.
jQuery Image Lazy Load WP
Add jquery lazy loading to images.
by the WordPress.com VIP team at Automattic, the TechCrunch 2011 Redesign team, and Jake Goldman (10up LLC).
Lazy load images to improve page load times and server bandwidth. Images are loaded only when visible to the user.
Ai Loader (jQuery Lazy Load)
This plugin enables images really lazy loading.
Lazy Widget Loader
The Lazy Widget Loader plugin provides lazy loading for widgets to improve page loading. Use it on slow widgets, especially those where external data is loaded, like widgets from Facebook, Twitter, AdSense, …
BJ Lazy Load
This plugin replaces all your post images and post thumbnails with a placeholder and loads images as they enter the browser window when the visitor scrolls the page.
YS images lazyload (Server Side)
Change the images src attribute in the service side, so as to achieve a real lazy load, and is compatible with all browsers.
WP YouTube Lyte
WP YouTube Lyte allows you to “lazy load” your video’s, by inserting “Lite YouTube Embeds”. These look and feel like normal embedded YouTube, but only call the actual “fat” Flash or HTML5-player when clicked on.
WP Image Preloader
Lazy Load Plugin for jQueryby Mika Tuupola
Lazy Load for MooTools 2.0
by David Walsh
LazyLoad allows you to defer image loading until the user scrolls down to each image.
QueryLoader 2 – Preload Your Images with Ease
by Gaya Design
What QueryLoader2 does is simply scanning the given elements for images (and background images) and preloading them before the website is visible.
This version has been modified to make it easier for users to implement (especially those who are already into jQuery.)
JAIL aka jQuery Asynchronous Image Loader plugin is a lightweight plugin for jQuery (just 4Kb for the minified version), really simple and powerful. It is used when you have got images, which have large dimension, in a page and you do not want to compromise the user experience making the page load slow. The main concept behind this plugin is deferring the loading of the images after the page is loaded.
by Stephane Caron
prettyLoader is a small (less than 4kb uncompressed) jQuery plugin that aim at making your life easier regarding ajax loader display.
Tutorials to Implementation
How to do Lazy Load Images in WordPressby WPBeginner
Have you ever visited a blog post that has a lot of images? If you have, then you probably have an idea of how SLOW it loads. Well Lazy load is to prevent that slow page load time. In this article, we will show you how to lazy load post images in WordPress.
How to LazyLoad images to Improve Page Speed [WordPress]
by Yousuf Khan Jee
Blog pages with lots of images can take a lot of time to load. The loading time can be decreased by using the sexy lazyloading image effect.
Lazyload effect can be added using 2 plugins which I am going to share here while there is also custom code for thesis theme users.
Lazy Loading Of Images – Resources You Need
by Web Resources Depot
It is very usual that a website presenting a list of images which is “longer in size than the viewport of our monitors” & we simply need to scroll to view the rest. In such cases, in order to make the websites load much faster, we can use lazy loading.
by jQuery for Designers
This tutorial will show how to load images in the background, and once loaded handle the event and create your own response.
jQuery Lazy Loader – Lazy Load Images and HTML On Scroll
by Michael Collins
I wrote this little jQuery plugin that I hope you’ll find useful to help in your endeavor to get lazy. The premise is to use a placeholder tag with an Html Comment inside to hide content from the rendering engine. If the browser can’t see your img tags or html elements with css images, it obviously wont render them.
We hope this resources is useful for you. Do you have an experience with the plugins above? Or do you have another great lazy load image resources? Please share your thought with us in the comment below.