1.为需要执行懒加载的<img>标签添加指定属性:
<img class="data-daily-image" data-daily-image="${topPic}" src="/image/custom/loading.gif" title="${name}" alt="${name}" width="360" height="225" data-img="${topPic}" isload="false"/>
src:指定图片加载前默认显示的图片;
data-img:存放我们需要加载的图片地址;
isload:为需要执行懒加载的标示;
2.添加lazyLoad.js文件,在之前必须要引入jquery
/** * JS图片延迟加载 * @constructor {DataLazyLoad} * @param {options} 对象传参 * @time 2014-1-10 */ /* * 延迟加载的原理:滚动时:待加载的资源相对于游览器顶端的距离 - threshold <= 可视区域相对于浏览器顶端的距离 true 就加载 * 否则的话 不加载 * 否则的话 不加载 */ function DataLazyLoad(options){ this.config = { container : window, //容器 默认为window threshold : -200, // 离多少像素渲染图片 event : 'scroll', // 默认为scroll(滚动) effect : 'fadeIn', // 默认为show 也可以为fadeIn, slideDown 等 jQuery 自带的效果 effectspeed : 1000, // 时间 suffix : 'img', // img属性 默认以data-img 也可以自定义后缀 skip_invisible : true // 如果img标签为隐藏的 那么不强制加载 }; this.cache = {}; this.init(options); } DataLazyLoad.prototype = { init: function(options){ this.config = $.extend(this.config, options || {}); var self = this, _config = self.config, _cache = self.cache; self._update(); // 滚动时(或者其他事件) 触发事件 $(_config.container).unbind(_config.event); $(_config.container).bind(_config.event,function(){ self._update(); }); }, /* * 加载对应的图片 */ _eachImg: function(item) { var self = this, _config = self.config, _cache = self.cache; if($(item).attr('isload') == 'false') { var dataImg = $(item).attr('data-'+_config.suffix), src = $(item).attr('src'); //$(item).hide(); $(item).attr('src',dataImg); $(item).attr('data-'+_config.suffix,''); //$(item)[_config.effect](_config.effectspeed); $(item).attr('isload','true'); } }, _update:function(){ var self = this, _config = self.config, _cache = self.cache; if(_config.container === window) { $('img').each(function(index,item){ // 如果图片隐藏的 那么不强制加载 if(_config.skip_invisible && !$('img').is(":visible")) { return; } if (self._abovethetop(item) || self._leftofbegin(item)) { // 什么都不处理 } else if (self._belowthefold(item) && self._belowthefold(item)) { self._eachImg(item); } }) }else { $('img',$(_config.container)).each(function(index,item){ // 如果图片隐藏的 那么不强制加载 if(_config.skip_invisible && !$('img').is(":visible")) { return; } if (self._abovethetop(item) || self._leftofbegin(item)) { } else if (self._belowthefold(item) && self._rightoffold(item)) { self._eachImg(item); } }) } }, /* * 往下滚动时 判断待加载的元素是否在可视区域内 * @return {Boolean} */ _belowthefold: function(elem){ var self = this, _config = self.config; var fold; if(_config.container === window) { fold = $(window).height() + $(window).scrollTop(); }else { fold = $(_config.container).offset().top + $(_config.container).height(); } return fold >= $(elem).offset().top - _config.threshold; }, /* * 往右滚动时 判断待加载的元素是否在可视区域内 * @return {Boolean} */ _rightoffold: function(elem){ var self = this, _config = self.config; var fold; if(_config.container === window) { fold = $(window).width() + $(window).scrollLeft(); }else { fold = $(_config.container).offset().left + $(_config.container).width(); } return fold >= $(elem).offset().left - _config.threshold; }, /* * 往上滚动 * @return {Boolean} */ _abovethetop: function(elem){ var self = this, _config = self.config; var fold; if(_config.container === window) { fold = $(window).scrollTop(); }else { fold = $(_config.container).offset().top; } return fold >= $(elem).offset().top + _config.threshold + $(elem).height(); }, /* * 往左滚动 * @return {Boolean} */ _leftofbegin: function(elem) { var self = this, _config = self.config; var fold; if (_config.container === window) { fold = $(window).scrollLeft(); } else { fold = $(_config.container).offset().left; } return fold >= $(elem).offset().left + _config.threshold + $(elem).width(); } }; // 初始化的方式 $(function(){ var datalazy = new DataLazyLoad({ container: window }); });
3.在html页面完全加载完毕后执行初始化(必须在$(document).ready(function(){})中执行初始化)
$(document).ready(function() { var datalazy = new DataLazyLoad({ container: window }); });