懶加載

分步加載輪播圖的時候，因爲是滑動式，什麼時候建立，複雜的時序，提早擺位，曾經困擾我好幾天。

今天好友給我介紹了一個懶加載的方法：

var Lazy = function(){
        var load = function(){
            var imgs = $('img[data-lazyload]'),
                winY = WIN.height(),
                scrollY = WIN.scrollTop();

            imgs.each(function(index, img){
                img = $(img);

                var data = img.attr('data-lazyload'),
                    //src = img.attr('src'),
                    imgY = img.offset().top;

                if(/*!src && */data && imgY <= winY + scrollY){
                    img.attr('src', data).removeAttr('data-lazyload');
                }
            });
        };

        load();
        WIN.on({
            resize: load,
            scroll: load
        });
    };

能夠看出這個是無限滾動，異步請求的時候用的。

其實輪播圖也能夠用，一次性寫入dom元素，但不給他們真實的src屬性，給個自定義的好比 data-lazyload，而後時序到了，再改回來，就實現了懶加載。

而不用動態添加和刪除dom結構了！