js圖片懶載入資源引用
基本原理: 在可見範圍內替換img標籤的src為實際圖片地址,實現圖片的載入。未可見範圍內的圖片src為空,不進行圖片的載入。
引用開源:
官方說:效能優於jQuery的lazyload
LazyLoad is a fast, lightweight and flexible script for
loading images only when they're about to enterthe viewport of a scrollable area, which
supports the srcset
attribute andwith and
takes best advantage from the progressive JPEGimage format
應用了漸進式圖片,漸進式圖片介紹見:
Name |
Meaning |
Default value |
|
The container in which to start searching for elements, and from which to listen to the scroll event |
|
|
The selector of the image elements inside the container |
|
|
The distance out of the viewport, expressed in pixel, before which to start loading the images |
|
|
The time that has to pass between one element parsing and the following, when fast scroll events occur |
|
|
The name of the data attribute containing the original image source. The "data-" is automatically added. |
|
|
The name of the data attribute containing the original image source set. The "data-" is automatically added. If you also need to add the
img tag, as
sizes gets ignored when the srcset attribute is missing .
|
|
|
The class applied to the elements while the loading is in progress |
|
|
The class applied to the elements when the loading is complete |
|
|
Specifies whether the script has to consider invisible images or not |
|
|
Specifies whether the script must show the images while they are loading. Set it to true when you use progressive JPEG format for your images.
Note: to make the image visible while loading, you will have to avoid using the
|
|
|
A function to be called when an image was loaded. |
|
|
A function to be called when the src of an image is set in the DOM. |
|
|
A function to be called when an image was processed. |
|
|
The URL of a placeholder image to be shown while the original image is loading. This option is ignored when the option
|
(A base64 encoded 1x1 transp. gif) |