更新图片“懒加载”代码

Author: zhiqiang21

lazy-load-img/README.md

@@ -2,21 +2,48 @@
 移动端“瀑布流”形式列表图片懒加载
 
 ### 使用方法
-1.为需要懒加载的DOM节点添加自定义属性``node-type='imglazy' ```
-2.`src`需要有一个默认值，可以设置为`#`
-3.img标签需要自定义属性`data-lazysrc ` 并且将真实的图片地址赋值给data-lazysrc
+1.为需要懒加载的图片节点添加自定义属性`node-type='imglazy' `
+
+2.img标签添加自定义属性`data-lazysrc ` ，并且将图片地址赋值给data-lazysrc
+
+3.图片的真实地址`src`赋值默认值为`#`
+
+4.可以在任意节点添加配置属性`lazy-setting`
+
+配置信息如下：
+```
+<div lazy-setting='{
+    "mobileHeight":0,   /*默认客户端的高度，值越大，首屏加载的图片越多*/
+    "loadNum":1         /*加载当前节点后的节点的个数*/
+}'>
+```
+
 
 **以上可以参考testhtml.html的结构**
+
+### 2016/02/22更新
+1.添加示例`demo`
+
+2.添加加载图片的可配置项
+    - `**mobileHeight**` 默认客户端的高度，值越大，首屏加载的图片越多
+    - **`loadNum`** 如果当前节点出现在屏幕上以后，可以一次性加载当前节点之后的若干个节点，可以跳高图片的加载速度
+
+3.优化滚动时“懒加载”部分代码
+
+
+
 ### 2015/12/16更新
 1,使用闭包重构懒加载的函数
+
 2,增加配置文件的使用，使用户对懒加载的行为更加可控
+
 3,通过`that` 暴露函数内部方法给用户，包括销毁内部对象，和解除绑定方法
 
 
-### 2015/22/27更新
+### 2015/12/27更新
 当`imglazy`节点在屏幕的可是区域内时，立即加载图片
 
-### 2015-10-29
+### 2015/10/29
 ### ＃ 1.解决当src为空时
 `location.href`获取的值为当前页面的域名
 

lazy-load-img/css/lazy.css

@@ -0,0 +1,22 @@
+*{
+    margin:0;
+    padding:0;
+}
+.clearfix:after {
+    display: block;
+    height: 0;
+    content: "\200B";
+    clear: both;
+}
+.href-block img{
+    width: 180px;
+    height:180px;
+}
+
+.content-left ,.content-right{
+    float:left;
+}
+
+.content-right{
+    margin-left:15px;
+}

lazy-load-img/img/pc_ebg1.jpg

@@ -0,0 +1,102 @@
+/**
+ * Created by zhiqiang on 2015/10/14.
+ * hpuhouzhiqiang@gmail.com
+ * 图片的懒加载
+ **/
+;(function($) {
+    var LoadImgLazy = function(imgNode) {
+        var _this = this;
+        _this.imgNode = imgNode;
+
+        _this.setting = {
+            "mobileHeight": 0, //扩展屏幕的高度，使第一屏加载个数可配置
+            "loadNum": 1 //滚动时，当前节点之后加载个数
+        };
+
+        $.extend(_this.setting, _this.getSetting());
+
+        _this.loadFirstSrceen();
+        $(window).on('scroll', function() {
+            _this.scrollLoadImg();
+        });
+
+
+    };
+
+    LoadImgLazy.prototype = {
+        mobileHeight: function() {
+            return $(window).height();
+        },
+        loadFirstSrceen: function() {
+            // 加载首屏
+            var _this = this;
+            var currentNodeTop;
+            var imgNodeList = _this.imgNode;
+            $(imgNodeList).each(function() {
+                currentNodeTop = $(this).offset().top;
+                if (currentNodeTop < _this.mobileHeight() + _this.setting.mobileHeight) {
+                    _this.replaceImgSrc($(this));
+                }
+            });
+        },
+        scrollLoadImg: function() {
+            //滚动的时候加载图片
+            var _this = this;
+            var currentNodeTop;
+            var scrollTop = $('body').scrollTop();
+            var imgLazyList = $('[node-type=imglazy]');
+
+            $(imgLazyList).each(function() {
+                currentNodeTop = $(this).offset().top;
+                if (currentNodeTop - scrollTop < _this.mobileHeight()) {
+                    //加载当前节点后的规定个数节点
+                    for (var i = 0, len = _this.setting.loadNum; i < len; i++) {
+                        _this.replaceImgSrc($(imgLazyList).eq(i));
+                    }
+                    return false;
+                }
+            });
+        },
+        replaceImgSrc: function(loadImgNode) {
+            //动态替换图片
+            var srcValue;
+            var imgDataSrc;
+            var _this = this;
+            var imgUrlList = $(loadImgNode).find('img[data-lazysrc]');
+
+            if (imgUrlList.length > 0) {
+                imgUrlList.each(function(i) {
+                    imgDataSrc = $(this).attr('data-lazysrc');
+                    srcValue = $(this).attr('src');
+                    if (srcValue === '#') {
+                        if (imgDataSrc) {
+                            $(this).attr('src', imgDataSrc);
+                            $(this).removeAttr('data-lazysrc');
+                        }
+                    }
+                });
+                //移除已经运行过懒加载节点的node-type 对性能提升
+                $(loadImgNode).removeAttr('node-type');
+            }
+        },
+        getSetting: function() {
+            var userSetting = $('[lazy-setting]').attr('lazy-setting');
+            if (userSetting && userSetting !== '') {
+                return $.parseJSON(userSetting);
+            } else {
+                return {};
+            }
+        },
+        destory: function() {
+            //销毁方法区
+            $(window).off('scroll');
+        }
+    };
+
+    LoadImgLazy.init = function(imgNode) {
+        new this(imgNode);
+    };
+
+    window.LoadImgLazy = LoadImgLazy;
+
+})(Zepto);