前言:lazyload是一个懒加载的基于jquery的懒加载的库。
实现原理:实现原理是在当图片不在视图区域内时,用一个class lazy标识图片,先将该图片的src置为空,把真正的url放到一个自定义属性里面。当检测到该图片需要被展示时,获取自定义属性里真正的url,修改到src里面,实现图片的懒加载。
基于lazyload的实现原理,写了一个demo。以下为代码分析:
缺省配置:
var default_settings = {
event: 'scroll',
failure_limit: 0,
effect: 'show',
container: window,
data_attribute: 'original',
skip_invisible: false,
load: null,
appear: null,
placehold: './placeholder.png'
}
构造器部分:
function lazyLoad(elements,options){
this.$elems = $(elements);
this.settings = $.extend({},options,default_settings);
this.$container = (this.settings.container == 'window'|| this.settings.container == undefined) ? $(wind