This is a WordPress 'Lazy Loading' / image preloading plugin to improve the page-load times of your site and decrease bandwith usage on the first call of your post pages.
This plugin makes use of the incredible performant Intersection Observerver API to detect if an element is in (or near) the viewport. This is an 'experimental' technique which is not available in every browser yet, but there's an official polyfill available which you can load by going to tools -> Image Preload Settings in the WP Admin menu.
The plugin has no external dependencies, so you can delete that $jquery.
Each image is accompanied by a <noscript> version so your site will still show images when Javascript is disabled.
- Download / clone repository
- Inside the repository you will find a
wp-image-preload.zip. Install this as a plugin or extract it in your WordPress plugins folder.
You can select the images in css with img[data-src]. When the images are loaded, a [data-loaded=true] is added which you can use to add a transition. For example:
img[data-src] {
opacity: 0;
transition: opacity 0.3s;
}
img[data-loaded=true] {
opacity: 1;
}
To develop or build the plugin, do a yarn install in the root. The following scripts are included:
dev: Transpiles the scripsbuild: Transpiles and minifies scriptsclean: Delets thewp-image-preload/assets/jsfolderzip: Zips the entirewp-image-preloadfoldercomplete: Runsclean,buildandzipsequentially and gives a production readywp-images-preload.zipplugin file.
The PHP in this plugin is a modification on WordPress LazyLoad plugin, released under the GPL v2 license. The lazyloading script is an adaption of Lozad.js by Apoorv Saxena, released under the MIT license.
I have no idea. GPL v2? MIT? What's the standard if you include GPL and MIT software in your release? Feel free to make a pull request on the subject (or anything else)
- Add option to add custom classes before and after load in WP Admin
- Add option to customise the offset in WP Admin
- fix license