js圖片懶加載資源引用

基本原理： 在可見範圍內替換img標籤的src爲實際圖片地址，實現圖片的加載。未可見範圍內的圖片src爲空，不進行圖片的加載。

引用開源:

 

https://github.com/verlok/lazyload

官方說：性能優於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

 

 

應用了漸進式圖片，漸進式圖片介紹見：

http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/

 

 

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)