V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
dbfox
V2EX  ›  分享创造

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

  •  
  •   dbfox · 2015-12-20 20:49:46 +08:00 · 2401 次点击
    这是一个创建于 3280 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    代码如下:

    放到页面最底部就可以了

    <img class="lazy" data-src="http://img4.tbcdn.cn/tfscom/i3/TB1T6QgHpXXXXXrXVXXXXXXXXXX_!!0-item_pic.jpg" src="/static/style/img/loading.gif" />

    是根据 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
        1
    zangbob  
       2015-12-20 21:42:32 +08:00
    并没有什么作用,图片一次全部加载完了。或者我用的姿势不对?
    LEFT
        2
    LEFT  
       2015-12-20 21:52:42 +08:00 via iPhone
    用你的 lazyload 还得把所有图片地址改一遍?
    starandtina
        3
    starandtina  
       2015-12-20 22:05:00 +08:00
    是挺无聊的,呵呵!
    qhxin
        4
    qhxin  
       2015-12-20 22:12:43 +08:00   ❤️ 1
    其实这样可以节约浏览器的连接数,一定程度上能让加载更顺畅。另外 loading 图片可以先写到 css 里预加载。\(^o^)/
    chairuosen
        5
    chairuosen  
       2015-12-20 22:14:04 +08:00
    @zangbob 应该把真实 src 放到 data-src 里, src 里只放 loading 效果或者不放
    loading
        6
    loading  
       2015-12-20 22:15:13 +08:00 via Android
    实现方式不妥!
    请参考渐进增强原则!
    dbfox
        7
    dbfox  
    OP
       2015-12-21 09:31:21 +08:00
    @LEFT 必须的啊
    zangbob
        8
    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" />
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   863 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 21:35 · PVG 05:35 · LAX 13:35 · JFK 16:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.