爱意满满的作品展示区。
aidevs

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

  •  
  •   aidevs · Dec 20, 2015 · 3048 views
    This topic created in 3802 days ago, the information mentioned may be changed or developed.

    为什么不想用 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 replies    2015-12-21 12:40:51 +08:00
    zangbob
        1
    zangbob  
       Dec 20, 2015
    并没有什么作用,图片一次全部加载完了。或者我用的姿势不对?
    LEFT
        2
    LEFT  
       Dec 20, 2015 via iPhone
    用你的 lazyload 还得把所有图片地址改一遍?
    starandtina
        3
    starandtina  
       Dec 20, 2015
    是挺无聊的,呵呵!
    qhxin
        4
    qhxin  
       Dec 20, 2015   ❤️ 1
    其实这样可以节约浏览器的连接数,一定程度上能让加载更顺畅。另外 loading 图片可以先写到 css 里预加载。\(^o^)/
    chairuosen
        5
    chairuosen  
       Dec 20, 2015
    @zangbob 应该把真实 src 放到 data-src 里, src 里只放 loading 效果或者不放
    loading
        6
    loading  
       Dec 20, 2015 via Android
    实现方式不妥!
    请参考渐进增强原则!
    aidevs
        7
    aidevs  
    OP
       Dec 21, 2015
    @LEFT 必须的啊
    zangbob
        8
    zangbob  
       Dec 21, 2015
    @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" />
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1092 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 22:54 · PVG 06:54 · LAX 15:54 · JFK 18:54
    ♥ Do have faith in what you're doing.