最近博客整了一个相册，浏览时一次性加载了所有图片，导致响应很慢，分页太麻烦，不想弄，于是查资料，实现懒加载。
原理是先生成所有img标签，src不给值，图片路径放到data-src属性中
如：

1
<img data-src='/img/test.jpg' />

然后通过js判断元素是不是在浏览器可视区域中
在可视就赋值给src，实现懒加载
判断是否在可视区域代码如下：

1
2
3
4
5
//判断id:test元素是否在浏览器可视范围内，可视false，否则true
($(window).scrollTop()>($("#test").offset().top+$("#test").outerHeight()))||(($(window).scrollTop()+$(window).height())<$("#test").offset().top)
//注意，.class 选择器如存在多个，需要将单个元素用$()包裹，如
($(window).scrollTop()>($($(".abc")[10]).offset().top+$($(".abc")[10]).outerHeight()))||(($(window).scrollTop()+$(window).height())<$($(".abc")[10]).offset().top)
//不然会提示offset()不存在
  • 主要代码如下
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    function setImg(index) {
    	//找到#imgphoto下所有img元素（find向下多级查找，children只沿着 DOM 树向下遍历单一层级）
    	var aImg = $("#imgphoto").find("img");
    	//防止重复刷新
    	if(aImg[index].getAttribute("src")!=aImg[index].getAttribute('data-src')){
    		//html5最新属性，取出data-src中的值
    		if (aImg[index].dataset) {  
    	        	var src = aImg[index].dataset.src;  
    		} else {  
    	        	var src = aImg[index].getAttribute('data-src');  
    		}
    	  	aImg[index].src=src;
    	}
    }
    //判断当前img的位置！
    function updateImg() {
    	var img = $("#imgphoto").children("img");
    	for (var i = 0, l = img.length; i < l; i++) {
    		var oimg = img[i];  
    		//检查oimg是否在可视区域  
    		var is=($(window).scrollTop()>($(oimg).offset().top+$(oimg).outerHeight()))||(($(window).scrollTop()+$(window).height())<$(oimg).offset().top);
    		if (!is) {
    		    //加载图片
    		    setTimeout("setImg(" + i + ")", 500);
    		}
    	}
    };
    //启动定时器，循环判断是否在可视区域，因onscroll被占用，代替方法
    var inter=setInterval("updateImg()",1000);//1000为1秒钟