首页 > 代码库 > 【JQuery插件】图片预加载

【JQuery插件】图片预加载

屏幕滚动到图片当前位置加载图片,给需要预加载的图片设置一个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插件】图片预加载