JS图片懒加载

View Code
 lazyload: function(){//懒加载deal图片
            if (!$('.dynload')[0]) {
                return;
            }
            var imgs = $('.dynload');
            var langImgs = imgs.length;
            var arrayImgs = new Array();
            var signLang = 0;
            var beginStart = false;
            for (var i = 0; i < langImgs; i++) {
                arrayImgs[i] = imgs.eq(i);
            }
            function dynLoadImg(){
                if (beginStart) 
                    return;
                beginStart = true;
                setTimeout(function(){
                    for (var j = signLang; j < langImgs; j++) {
                        if (typeof(arrayImgs[j].attr('imgsrc')) != 'undefined' && arrayImgs[j].offset().top < $(document).scrollTop() + $(window).height() + 800) {
                            arrayImgs[j].attr('src', arrayImgs[j].attr('imgsrc')).removeAttr('imgsrc');
                            signLang++;
                        }
                    }
                    beginStart = false;
                    
                }, 100);
                
            }
            $(window).scroll(function(){
                dynLoadImg();
            })
            dynLoadImg();
            
        }

标记为class="dynload"的img元素被懒加载出来

html页面源代码如下方式

<img class="dynload" src="http://xxx.com/img/a.gif" imgsrc="http://xxx.com/img/filename.jpg">

posted @ 2013-02-27 15:29  纠结的NAME  阅读(591)  评论(0编辑  收藏  举报