1. 程式人生 > >js圖片懶載入資源引用

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

container

The container in which to start searching for elements, and from which to listen to the scroll event

window

elements_selector

The selector of the image elements inside the container

"img"

threshold

The distance out of the viewport, expressed in pixel, before which to start loading the images

300

throttle

The time that has to pass between one element parsing and the following, when fast scroll events occur

40

data_src

The name of the data attribute containing the original image source. The "data-" is automatically added.

"original"

data_srcset

The name of the data attribute containing the original image source set. The "data-" is automatically added. If you also need to add the sizes

attribute, you can do it directly to you img tag, as sizes gets ignored when the srcset attribute is missing .

"original-set"

class_loading

The class applied to the elements while the loading is in progress

"loading"

class_loaded

The class applied to the elements when the loading is complete

"loaded"

skip_invisible

Specifies whether the script has to consider invisible images or not

true

show_while_loading

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 src attribute in the img tag

false

callback_load

A function to be called when an image was loaded.

null

callback_set

A function to be called when the src of an image is set in the DOM.

null

callback_processed

A function to be called when an image was processed.

null

placeholder

The URL of a placeholder image to be shown while the original image is loading. This option is ignored when the option show_while_loading is set to true

(A base64 encoded 1x1 transp. gif)