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)