Lightweight Image Lazy-Loading Component (Original)
Add-ons
Plugin Description: A lightweight image lazy-loading component with no dependencies.
Last Updated: 2020-03-20 10:42:55
Changelog:Library version upgraded to v2.1.0; no longer depends on jQuery and is developed entirely using native JavaScript; no longer supports browsers older than IE8.
Download FunLazy v1.0.0(Compatible with IE7)
FunLazy
An image lazy-loading component developed entirely using native JavaScript. It fully supports mainstream modern browsers and prioritizes the use of the Intersection Observer API to improve lazy-loading performance.
Usage
Include Files
1 2 3 | <!-- jquery 1.9.0+ --><script src="jquery.min.js"></script><script src="funlazy.min.js"></script> |
Add Attributes
1 2 3 4 5 6 7 8 9 10 11 12 | <body> <img data-funlazy="01.jpg" width="700" height="700"> <img data-funlazy="02.jpg" width="700" height="700"> <img data-funlazy="03.jpg" width="700" height="700"> <img data-funlazy="04.jpg" width="700" height="700"> <img data-funlazy="05.jpg" width="700" height="700"> <img data-funlazy="06.jpg" width="700" height="700"> <img data-funlazy="07.jpg" width="700" height="700"> <img data-funlazy="08.jpg" width="700" height="700"> <img data-funlazy="09.jpg" width="700" height="700"> <img data-funlazy="10.jpg" width="700" height="700"></body> |
Initialize the Component
1 2 3 4 5 | $.FunLazy({ onSuccess: function ( el, img ) { console.log( "Image:" + img + "Loaded" ); }}); |
API Parameters
| Parameters | Description | Type | Default Value |
|---|---|---|---|
| container | Target container. Default: null, which represents window. | Object / String | null |
| effect | Image display effect. Available values: show, fadeIn. | String | show |
| placeholder | Placeholder image | String | Base64-encoded gray image |
| errorPlaceholder | Placeholder image displayed when image loading fails | String | "" |
| threshold | Threshold value, unit: px | Number | 0 |
| width | Image width. Numeric values use px as the unit. Percentage values are also supported. Can be set through CSS or inline attributes. | Number / String | null |
| height | Image height. Numeric values use px as the unit. Percentage values are also supported. Can be set through CSS or inline attributes. | Number / String | null |
| axis | Container scrolling direction. Available values: x, y. | String | y |
| eventType | Mouse event that triggers image loading. Available values: click, dblclick, mouseover. | String | "" |
| onSuccess | Callback function executed when an image loads successfully. The callback receives two parameters: 1. The element whose image loaded successfully. 2. The successfully loaded image URL. | Function | Empty function |
| onError | Callback function executed when image loading fails. The callback receives two parameters: 1. The element whose image failed to load. 2. The URL of the image that failed to load. | Function | Empty function |
评论