码迷,mamicode.com
首页 > Web开发 > 详细

【JQuery插件】图片预加载

时间:2014-11-03 23:58:53      阅读:383      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   color   ar   for   sp   div   on   

屏幕滚动到图片当前位置加载图片,给需要预加载的图片设置一个data-url的属性即可。

;(function($){
    /*
    图片预加载
    @author liuming
    @demo $(‘img[data-url]‘).ImgLoading();    
    */
    $.fn.ImgLoading=function(){
        var aImgs =$(this),/*缓存图片列表*/
            $win = $(window),
            img,imgTop,
            winH = $win.height(),
            Timmer=null,
            i,
            scrollTop;

        $win.bind(‘load scroll.ImgLoading‘,function(){
            if(Timmer){clearTimeout(Timmer);}
            Timmer = setTimeout(eachImg,100);
        });

        function eachImg(){
            /*数组为空 清除事件*/
            if(aImgs.length==0){return $win.unbind(‘scroll.ImgLoading‘);}
            scrollTop = $win.scrollTop();
            for(i=aImgs.length-1; i>-1; i--){
                img = $(aImgs[i]);
                imgTop = img.offset().top;
                /*判断图片正在屏幕中 */
                if(scrollTop+winH > imgTop && scrollTop<imgTop+winH){
                    img.attr(‘src‘,img.attr(‘data-url‘));
                    aImgs.splice(i,1);
                }
            }
        }

    }

})(jQuery);

 

【JQuery插件】图片预加载

标签:style   blog   io   color   ar   for   sp   div   on   

原文地址:http://www.cnblogs.com/dtdxrk/p/4072475.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!