正文

JQUERY 插件开发——LAZYLOADIMG（预加载和延迟加载图片)

IP云
IP云V管理员/6 阅读
06/20
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

开发背景

本插件开发是近期写的最后一个插件了，接下来我想把最近研究的redis最为一个系列阐述下。当然Jquery插件开发是我个人爱好，我不会停止，在将来的开发中我会继续完善，当然也会坚持写这个系列的。

每次开发我都会说一下开发插件中用的思想和自己在开发时候的想法。这篇开发也不例外，等会我会一一叙述。上一篇提到的是代码重构思想，这一篇我想谈的是同一个插件，不同的设计思想，得到同样效果。说的有点绕，简单的说就是殊途同归的意思。

LazyLoadImg 插件思想

预加载和延迟加载这个说法想必大家都有所了解。WEB中的预加载就是在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。说白了，就是在提前执行相关代码，提高用户体验。延迟加载(lazy load)是(也称为懒加载)，延迟加载机制是为了避免一些无谓的性能开销而提出来的，所谓延迟加载就是当在真正需要数据的时候，才真正执行数据加载操作。当然这两个思想对于图片来说，就是提前或是推迟加载图片。也就这个简单。

刚刚说到同一插件不同思想的说法。那么我现在说说是啥意思。对于预加载图片（延迟加载同理），简单的说就是提前加载图片。既然是提前，很多人习惯的思想就是通过时间去控制加载图片，当然这样是可以的，但是对于不同的场景，都通过时间去控制，那并不一定是最好的方式。就拿本插件为例，如果你用时间去控制预加载的话是很困难的，其实延迟加载也是比较困难的，因为没有一个时间值比较合适，所以我这里使用滚动条滚动距离（离加载区域的距离）来计算的。

通过滚动距离的一个好处就是易于控制，因为我们在滑动滚动条的时候可以立即知道自己滚动条离加载区域的距离，我们只要控制好这个距离就可以很简单的完成预加载和延迟加载这两种情况。既实现了功能，有简化了逻辑思路和代码。

虽然这个插件很小，但是我还是用了标准的开发格式写了，其中也是使用了事件句柄、委托等思想，还有这两种思想，我之前的博文中也有详细说明过其优点。这里也不再累述。俗话说麻雀虽小，五脏俱全。这个插件就是这个意思了^_^

插件代码

本插件属于简单插件，所以代码逻辑也很少，大家随意看看，都有注释，还是那句话，注释是一种良好习惯，希望各位猿们都对自己和别人负责，写好自己的代码注释。如果有不理解的或是有更好见解的，随时联系我。下面有我的QQ号。还有公共部分代码我就不再累述了，前几篇博文中都有相关代码，一看便知。

1 /* 2 * instructions ：lazyLoadImg 3 * date : 2014-10-27 4 * author : 张文书 5 * Last Modified 2014-10-17 6 * By 张文书 7 */ 8 $(function () { 9 ///说明：10 /// 预加载图片和延迟加载图片11 var lazyLoadImg = function () {12 this.defaults = {13 imgObjList: [],//可见区域需要设置元素的集合14 lazyHeight: 100, //预加载高度（预判高度>0表示预加载；<0表示延迟加载）15 hideSrcHost: "",//隐藏img的src地址16 };17 this.options = {};18 };1920 lazyLoadImg.prototype = {21 constructor: lazyLoadImg,22 init: function (params) {23 this.options = $.coverObject(this.defaults, params);24 this._init();25 },26 _init: function () {27 this._handleWindowScroll();//初始化加载28 this._registerWindowScroll();29 },30 //说明：31 // 注册window scroll事件32 _registerWindowScroll: function () {33 var handleEvent = $.delegate(this._handleWindowScroll, this);34 $(window).scroll(handleEvent);35 },36 //说明：37 // window scroll事件句柄38 _handleWindowScroll: function () {39 var lazyHeight = this.options.lazyHeight;40 var imgObjList = this.options.imgObjList;41 var hideSrcHost = this.options.hideSrcHost;42 if (imgObjList.length === 0) {43 return;44 }45 for (var i = 0; i < imgObjList.length; i++) {46 var objList = imgObjList[i];47 $.each(objList, function (j, v) {48 var id = $(v).attr("id");49 if (lazyLoadImg.prototype.boolGetObjList(id, lazyHeight)) {50 lazyLoadImg.prototype.setProperties(id, hideSrcHost);51 }52 });53 }54 },55 //说明：56 // 判断是否在可视区域情况 1.向上滚动超出可视区域, 2.向下滚动超出可视区域57 boolGetObjList: function (id, lazyHeight) {58 var scrollTop = $(window).scrollTop();59 var itemTop = $('#' + id).outerHeight();60 var itemOffsetTop = $('#' + id).offset().top;61 var windowHeight = $(window).height();62 //不在可视区域63 if ((scrollTop - lazyHeight > (itemOffsetTop + itemTop)) || ((scrollTop + windowHeight) < itemOffsetTop - lazyHeight)) {64 return false;65 }66 return true;67 },68 //说明：69 // 当满足在可见区域时候设置样式70 setProperties: function (id, hideSrcHost) {71 var imgHost = $("#" + id).attr(hideSrcHost);72 var src = $("#" + id).attr("src");73 if (imgHost == src) {74 return;75 }76 $("#" + id).attr("src", imgHost);77 }78 };79 $.lazyLoadImg = new lazyLoadImg();80 });

总结

插件虽小，但是总结还是有必要的。本次插件开发呢，我最大的感触就是思想很重要。其实当时我开发的时候第一个念头就是用时间控制，当实现时候才发现，这种思路不是不能用，而是不好用。然后立即掉头，另寻他法。还好没有浪费啥太多时间。要知道，开发过程中，当项目很急的时候，一个思想的转换，是需要勇气的。所以，当我们在开发时候后，遇到想法上的问题时，我们不妨先放下当前所完成的，不要不舍得那写好的几句代码，说不定你后面想的好方法可以使你事半功倍呢。其实这很自然，因为你后来的想法是基于你当前的想法之上的。

最后呢，如果有需要源码的或者想共同探讨的同仁，随时联系我，QQ: ，注明园友就好，同时也希望大家也能提出宝贵意见，不吝赐教。秉承共同探讨、共同进步！如有转载，请注明出处，谢谢！^_^

转自：http://www.cnblogs.com/mzws/p/LazyLoadImg.html