js图片预加载

ゝ一纸荒年。 2022-08-19 11:14 333阅读 0赞

调用库函数
    function loadimg(arr,funLoading,funOnLoad,funOnError){
    		var numLoaded=0,
    		numError=0,
    		isObject=Object.prototype.toString.call(arr)==="[object Object]" ? true : false;
    		var arr=isObject ? arr.get() : arr;
    		for(a in arr){
    			var src=isObject ? $(arr[a]).attr("data-src") : arr[a];
    			preload(src,arr[a]);
    		}
    	 
    		function preload(src,obj){
    			var img=new Image();
    			img.οnlοad=function(){
    				numLoaded++;
    				funLoading && funLoading(numLoaded,arr.length,src,obj);
    				funOnLoad && numLoaded==arr.length && funOnLoad(numError);
    			};
    			img.οnerrοr=function(){
    				numLoaded++;
    				numError++;
    				funOnError && funOnError(numLoaded,arr.length,src,obj);
    			}
    			img.src=src;
    		}
    	 
    }

中间方法

//已载完成
    	var imgοnlοad=function(errors){
    			/*errors：加载出错的图片数量；*/
    		console.log("loaded,"+errors+" images loaded error!");
    		setTimeout(function(){
    			$("#loadingpic").fadeOut(500);
    			setTimeout(function(){
    				$(".swiper-container").fadeIn(500);
    			},200)
    		},1000)
    	}
    	//已加载完成数量
    	var funloading=function(n,total,src,obj){
    			/*
    			n：已加载完成的数量；
    			total：总共需加载的图片数量；
    			src：当前加载完成的图片路径；
    			obj：当loadimg函数中传入的arr为存放图片路径的数组时，obj=src，是图片路径，
    				   当arr为jquery对象时，obj是当前加载完成的img dom对象。
    		   */
    		console.log(n+"of"+total+" pic loaded.",src);
    		var newimg = document.createElement("img");
    		newimg.src=src;
    		$("body").append(newimg).fadeIn();
    	}
    	//把加载值放给数量
    	var funloading_obj=function(n,total,src,obj){
    		console.log(n+"of"+total+" pic loaded.",src);
    		$(obj).attr("src",src);
    		$(obj).fadeIn(200);
    	}
    	//加载错误情况 
    	var funOnError=function(n,total,src,obj){
    		console.log("the "+n+"st img loaded Error!");
    	}

最后调用

loadimg($(".swiper-slide img"),funloading\_obj,imgonload,funOnError);