jQuery simply implements image preloading
- 2020-06-01 08:09:12
- OfStack
jQuery implements image preloading
JS code
$(function(){
loadImg("http://d.hiphotos.baidu.com/image/pic/item/fd039245d688d43f14f69eff7f1ed21b0ef43b5b.jpg",addImg);
function loadImg(url,callback){
var img = new Image();
img.onload = function(){
img.onload = null;
callback(img);
}
img.src=url;
img.width ="202";
img.height = "202";
img.attr("defaulturl","../images/img.png");
if(){}
}
function addImg(img){
$(img).appendTo($(".imgload li"))
}
})
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Image preloading </title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
<div class="imgload">
<ul>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
<li class="fl"></li>
</ul>
</div>
</body>
</html>
Other instances
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.onload=function(){
numLoaded++;
funLoading && funLoading(numLoaded,arr.length,src,obj);
funOnLoad && numLoaded==arr.length && funOnLoad(numError);
};
img.onerror=function(){
numLoaded++;
numError++;
funOnError && funOnError(numLoaded,arr.length,src,obj);
}
img.src=src;
}
}
Parameter description:
arr: can be an array to store the image path, or the jquery object selected from img;
funLoading: the operation performed after each individual picture is loaded;
funOnLoad: the operation after all the pictures are loaded;
funOnError: operation when a single image is loaded incorrectly.
Lazy loading,
var imgonload=function(errors){
/*errors : the number of images loaded incorrectly; */
console.log("loaded,"+errors+" images loaded error!");
}
var funloading=function(n,total,src,obj){
/*
n : the number of completed loads;
total : the total number of images to be loaded;
src : the image path that has been loaded;
obj : when loadimg Passed in from the function arr When storing an array of image paths, obj=src , is the image path,
when arr for jquery Object, obj Is the current load completed img dom Object.
*/
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!");
}
Debugging use cases
console.log("loading...");
loadimg($("img"),funloading_obj,imgonload,funOnError);
/*loadimg(["http://pic22.nipic.com/20120619/9607634_212642465144_2.jpg",
"http://pic21.nipic.com/20120531/1670912_103610084349_2.jpg",
"http://pic21.nipic.com/20120616/4952071_130629530136_2.jpg",
"http://pic21.nipic.com/20120610/1723580_105037029000_2.jpg",
"http://pic22.nipic.com/20120617/2572038_125013326121_2.jpg"
],funloading,imgonload,funOnError);*/
That's all for this article, I hope you enjoy it.