EasyLazyload.js - An Extremely Useful JavaScript Image Lazy Loading Plugin
Last Updated: 2018/7/23 12:01:43 AM
Changelog:Fix image paths that cannot be accessed properly.
EasyLazyload.js
Super Useful JavaScript Image Lazy Loading Plugin
Usage
Include EasyLazyload.js
Replace image src with data-lazy-src
1 | <img data-lazy-src="..." /> |
Call the global method
1 | lazyLoadInit(） |
Usage Instructions
Before including EasyLazyload.js, you need to reference jquery && zepto
Must be run with a server environment enabled
Parameter List
Example Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> lazyLoadInit({ coverColor:"white", coverDiv:"<h1>test</h1>", offsetBottom:0, offsetTopm:0, showTime:1100, onLoadBackEnd:function(i,e){ console.log("onLoadBackEnd:"+i); } ,onLoadBackStart:function(i,e){ console.log("onLoadBackStart:"+i); } });</script> |
coverColor: The color of the overlay displayed before the image appears
coverDiv: Custom content that can be displayed in the overlay before the image appears
offsetBottom: The distance between the image and the bottom of the screen at which it appears (Note: Lazy-loaded images normally appear when their top edge reaches the bottom of the screen. Set this value if you want the image to appear when its top edge is still a certain distance away from the bottom of the screen.)
offsetTopm: The distance between the image and the bottom of the screen at which it appears (Note: Same as above, but measured from the top.)
onLoadBackEnd: Callback function executed when the image has fully appeared. Parameters: (index, event), representing the index of the loaded image and the DOM object (a jQuery DOM or Zepto DOM object).
onLoadBackStart: Callback function executed when the image has finished downloading and is about to be displayed (same parameters as above).
Advantages of EasyLazyload.js
EasyLazyload.js provides genuine lazy loading without affecting element styles in any way.
Loads images sequentially through a queue without affecting page performance.
No need to set any width or height values. Simple and easy to use.