最近博客整了一个相册,浏览时一次性加载了所有图片,导致响应很慢,分页太麻烦,不想弄,于是查资料,实现懒加载。
原理是先生成所有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秒钟