add loazload

zhangyonghong · zhangyonghong · commit b1a9aef18d0a · 2015-07-15T10:32:16.000+08:00
diff --git a/js.md b/js.md
@@ -15,6 +15,131 @@ Math.random()*(n-m)+m
 // 他会做event.stopPropagation();
 // 停止callback function的执行并且立即return回来
 ```
+
+- 两种图片lazy加载的方式
+第一个By JS中级交流群 成都-猎巫 第二个By 上海-zenki 
+```javascript
+// @description 准备为图片预加载使用的插件
+// 使用的图片容器css类名为lazy-load-wrap
+// 图片真实地址为data-lazy-src
+// 当lazy-load-wrap容器进入视口，则开始替换容器内所有需要延迟加载的图片路径，并更改容器的加载状态
+//第一种方法
+$.fn.compassLazyLoad=function(){
+	var _HEIGHT=window.innerHeight,
+	_lazyLoadWrap=$('.lazy-load-wrap');
+
+	var methods={
+		setOffsetTop:function(){
+			$.each(_lazyLoadWrap,function(i,n){
+				$(n).attr({
+					'top':n.offsetTop-_HEIGHT,
+					'status':'wait'
+				});
+			})
+		},
+		isShow:function(){
+			var _scrollTop=$(window).scrollTop;
+			//利用image容器判断是否进入视口，而非image本身
+			$.each(_lazyLoadWrap,function(){
+				var _that=$(this);
+				if (_that.attr('status')==='done') {
+					return;
+				};
+				if (_that.attr('top')<=_scrollTop) {
+					_that.find('img[data-lazy-src]').each(function(i,n){
+						n.src=$(n).data('lazy-src');
+					});
+					_that.attr('status','done');
+				};
+			})
+		},
+		scroll:function(){
+			$(window).on('scroll',function(){
+				methods.isShow();
+			});
+		},
+		init:function(){
+			methods.setOffsetTop();
+			methods.isShow();
+			methods.scroll();
+		}
+	};
+	methods.init();
+
+}
+
+
+//第二种方法
+
+var exist=(function($){
+	var timer=null,
+	temp=[].slice.call($('.container'));
+	ret={};
+
+	for(var i=0,len=temp.length-1;i<=len;i++){
+		ret[i]=temp[i];
+	}
+	var isExist=function(winTop,winEnd){
+		for(var i in ret){
+			console.log(ret);
+			var item=ret[i],
+			eleTop=item.offsetTop,
+			eleEnd=eleTop+item.offsetHeight;
+
+			if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
+				$(item).css('background','none');
+				new Tab($(item).attr('id'),data).init;
+				delete ret[i];
+			}
+		}
+	}
+	return {
+		timer:timer;
+		isExist:isExist;
+	};
+})($);
+
+
+
+//第三种方法
+Zepto(function ($) {
+    var swiper = new Swiper('.swiper-container', {
+        pagination: '.swiper-pagination',
+        paginationClickable: true,
+        autoplay: 3000,
+        loop: true,
+        autoplayDisableOnInteraction: false
+    });
+    (function lazyLoad() {
+        var imgs = $(".lazyLoad");
+        var src = '';
+        $.each(imgs, function (index, item) {
+            src = $(item).attr('data-src');
+            $(item).attr('src', src);
+        });
+    })();
+});
+$(function () {
+    var lazyLoadTimerId = null;
+    /// 智能加载事件
+    $(window).bind("scroll", function () {
+        clearTimeout(lazyLoadTimerId);
+        lazyLoadTimerId = setTimeout(function () {
+            // 延迟加载所有图片
+            var isHttp = (location.protocol === "http:");
+            $("#ym_images img").each(function () {
+                var self = $(this);
+                if (self.filter(":above-the-fold").length > 0) {
+                    var originUrl = self.attr("data-original");
+                    self.attr("src", originUrl);
+                }
+            });
+        }, 500);
+    });
+});
+
+```
+
 #### 2. Mobile - js
 
 
