无聊，不想用 jquery lazyload，自己手工写了个简短代码，欢迎批评指正收藏

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3256 天前的主题，其中的信息可能已经有所发展或是发生改变。

为什么不想用 jquery lazyload ？
1 需要依赖庞大的 jquery 库，有点大材小用
2 部分（低配）手机上面渲染执行速度太慢
3 感觉之前的 lazyload 写的并不是非常好
我写的 lazyload 我也不敢说好，但是目前符合我的要求，来这里也是学习下

代码如下：

放到页面最底部就可以了

是根据 class="lazy" data-src="" 这两个 html 属性来解析的。

(function () {
    var sign = "lazy";
    var imgsArray = [];
    var imgs = document.getElementsByTagName('img');
    for (var i = 0; i < imgs.length; i++) {
        var img = imgs[i];
        var dsrc = img.getAttribute('data-src');
        var cname = img.className;
        if (cname && cname.indexOf(sign) >= 0 && dsrc && img.src != dsrc) {
            imgsArray.push(img);
        }
    }
    var b = document.body;
    var loadAreaImages = function () {
        var bst = b.scrollTop;
        var bsl = b.scrollLeft;
        var ih = window.innerHeight;
        var iw = window.innerWidth;
        for (var i = 0; i < imgsArray.length; i++) {
            var img = imgsArray[i];
            var dsrc = img.getAttribute('data-src');
            if (dsrc && img.src != dsrc) {
                var iot = img.offsetTop;
                var iol = img.offsetLeft;
                if (ih + bst + 100 >= iot && iw + bsl + 100 >= iol && bst - 100 <= iot && bsl - 100 <= iol) {
                    img.src = dsrc;
                }
            }
        }
    }
    var lst = null;
    var loadImages = function () {
        if (lst) {
            clearTimeout(lst);
        }
        lst = setTimeout(loadAreaImages, 500);
    }
    var bind = function (e, f) {
        var l = window.addEventListener;
        var w = window.attachEvent;
        l ? l(e, f, true) : w('on' + e, f);
    }
    var eves = ['load', 'scroll', 'resize'];
    for (var e in eves)
        bind(eves[e], loadImages, true);
})();

8 条回复 • 2015-12-21 12:40:51 +08:00

zangbob

2015-12-20 21:42:32 +08:00

并没有什么作用，图片一次全部加载完了。或者我用的姿势不对？

LEFT

2015-12-20 21:52:42 +08:00 via iPhone

用你的 lazyload 还得把所有图片地址改一遍？

starandtina

2015-12-20 22:05:00 +08:00

是挺无聊的，呵呵！

qhxin

2015-12-20 22:12:43 +08:00

其实这样可以节约浏览器的连接数，一定程度上能让加载更顺畅。另外 loading 图片可以先写到 css 里预加载。\(^o^)/

chairuosen

2015-12-20 22:14:04 +08:00

@zangbob 应该把真实 src 放到 data-src 里， src 里只放 loading 效果或者不放

loading

2015-12-20 22:15:13 +08:00 via Android

实现方式不妥！
请参考渐进增强原则！

dbfox

2015-12-21 09:31:21 +08:00

@LEFT 必须的啊

zangbob

2015-12-21 12:40:51 +08:00

@chairuosen 就是参考你这段写的，真实地址放在 data-src 里了
<img class="lazy" data-src="http://img4.tbcdn.cn/tfscom/i3/TB1T6QgHpXXXXXrXVXXXXXXXXXX_!!0-item_pic.jpg" src="/static/style/img/loading.gif" />