WP Lazy Loaded Images
A simple plugin to enable lazy loading for all images using WordPress image functions, or embedded into posts and pages using the WordPress dashboard. The plugin works by replacing the original image source with a blank transparent gif via datauri. Reducing page load speed, network requests, and sav
A simple plugin to enable lazy loading for all images using WordPress image functions, or embedded into posts and pages using the WordPress dashboard.
The plugin works by replacing the original image source with a blank transparent gif via datauri. Reducing page load speed, network requests, and saving bandwidth for host and visitors unless they scroll where an image is in view. The plugin makes use of the fantastic lazysizes javascript library.
This section describes how to install the plugin and get it working.
- 01Upload the plugin files to the /wp-content/plugins/wp-lazy-loaded-images directory, or install the plugin through the WordPress plugins screen directly.
- 02Activate the plugin through the ‘Plugins’ screen in WordPress
- 03That’s it! It should automatically replace images used inside of posts / pages (where passed through properly in themes), plugins, and more.
Frequently asked questions.
How can I change the default placeholder color?
As of 2.0.0, Images now load as a transparent gif, which should remove the need to add custom image colors, and make it work in more situations automatically.
Fade in images as they load
With the new lazy load library, a few helper CSS classes are included by default. The full documentation can be found here , but the gist of it [pulled from the github repo] is as follows:
/* fade image in after load */ .lazyload, .lazyloading { opacity: 0; } .lazyloaded { opacity: 1; transition: opacity 300ms; }
Fallback
As of 1.4.0, the plugin also adds support for a noscript fallback so the images will appear in browsers that might have Javascript disabled.
To take full advantage of this, the plugin provides a fully automatic solution using the following filter to your functions.php , add_filter( 'lazy_load_enable_fallback', '__return_true' ) . This method will automatically handle all of the below instructions. If you’re developing a custom theme you might want to include the following instructions manually, in that case you can use add_filter( 'lazy_load_enable_noscript', '__return_true' ) to only add the <noscript> tags and leave the styles, javascript, and body classes untouched.
