Home > Web Front-end > JS Tutorial > jQuery image preloading implementation code for proportional scaling_jquery

jQuery image preloading implementation code for proportional scaling_jquery

WBOY
Release: 2016-05-16 18:01:20
Original
1434 people have browsed it
Copy code The code is as follows:

/*
* Image preload and auto zoom
* scaling Whether to automatically scale in equal proportions
* width The maximum height of the image
* height The maximum width of the image
* loadpic The path of the image being loaded
* example $("*").LoadImage(true,w, h);
*/
jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
if(loadpic==null)loadpic="../images/loading.gif" ;
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image( );
//alert("Loading...")
img.src=src;
//Auto-scaling pictures
var autoScaling=function(){
if(scaling) {
if(img.width>0 && img.height>0){
if(img.width/img.height>=width/height){
if(img.width>width){
t.width(width);
t.height((img.height*width)/img.width);
t.css("margin-top", (height-t.height( ))/2);
}else{
t.width(img.width);
t.height(img.height);
t.css("margin-top", ( height-t.height())/2);
}
}
else{
if(img.height>height){
t.height(height);
t.width((img.width*height)/img.height);
t.css("margin-top", (height-t.height())/2);
}else{
t.width(img.width);
t.height(img.height);
t.css("margin-top", (height-t.height())/2);
}
}
}
}
}
//The cached image will be automatically read when processing ff
if(img.complete){
//alert( "getToCache!");
autoScaling();
return;
}
$(this).attr("src","");
var loading=$("< ;img alt="Loading..." title="Picture loading..." src="" loadpic "" />");
t.hide();
t.after( loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
//alert("finally!")
});
});
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template