首页 > javascript > 图片懒加载技术
2014
07-31

图片懒加载技术

/* 大图文图片延迟加载 */
    var lazyNode = $('.lazy-bk');
    lazyNode.each(function(){
        var self = $(this);
        if(self.is('img')){
            self.attr('src','data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC');
        }else{
            self.css({
                'background-image'  : 'url(/template/10/img/loading_large.gif)',
                'background-size'   : '120px 120px'
        })
    }
})

// 前三个页面的图片延迟加载
setTimeout(function(){
    for(var i=0;i<3;i++){
        var node = $(".m-page").eq(i);
        if(node.length==0) break;
        if(node.find('.lazy-bk').length!=0){
            lazy_change(node);
        }else continue;
    }
},200)

// 加载当前后面第三个
function lazy_bigP(){
    for(var i=3;i<=5;i++){
        var node = $(".m-page").eq(page_n+i-1);
        if(node.length==0) break;
        if(node.find('.lazy-bk').length!=0){
            lazy_change(node);
        }else continue;
    }
}

// 图片延迟替换函数
function lazy_change(node){
        if(node.attr('data-yuyue')=='true'){
            $('.weixin-share').find('.lazy-bk').attr('src',$('.weixin-share').find('.lazy-bk').attr('data-bk'));
        }
        var lazy = node.find('.lazy-bk');
        lazy.each(function(){
            var self = $(this),
                srcImg = self.attr('data-bk');

            $('<img />')
                .on('load',function(){
                    if(self.is('img')){
                        self.attr('src',srcImg)
                    }else{
                        self.css({
                            'background-image'  : 'url('+srcImg+')',
                            'background-size'   : 'cover'
                        })
                    }

                    // 判断下面页面进行加载
                    for(var i =0;i<$(".m-page").size();i++){
                        var page = $(".m-page").eq(i);
                        if($(".m-page").find('.lazy-bk').length==0) continue
                        else{
                            lazy_change(page);
                        }
                    }
                })
                .attr("src",srcImg);

            self.removeClass('lazy-bk');
        })  
}</pre><pre class="brush:html;toolbar:false">&lt;div&nbsp;class=&quot;m-img&nbsp;m-img01&nbsp;lazy-bk&quot;&nbsp;data-bk=&quot;files/52e2698aa149516269.jpg&quot;&nbsp;style=&quot;background:&nbsp;url(files/loading_large.gif)&nbsp;no-repeat&nbsp;scroll&nbsp;center&nbsp;center&nbsp;/&nbsp;120px&nbsp;120px&nbsp;rgb(221,&nbsp;221,&nbsp;221);&quot;&gt;&lt;/div&gt;</pre><p>html代码中只需要这样使用即可<br/></p>
最后编辑日期:
作者:hainuo
hainuo
这个作者貌似有点懒,什么都没有留下。
https://shenghuo.alipay.com/transfer/aaCollect/pay.htm?id=18656668&sign=1e0c1245ffd24ee46f648ea278825f49
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!