Home  >  Article  >  Web Front-end  >  jquery image preloading automatic proportional scaling plug-in_jquery

jquery image preloading automatic proportional scaling plug-in_jquery

WBOY
WBOYOriginal
2016-05-16 18:57:09870browse
Copy code The code is as follows:

/*
********** ****Picture preloading plug-in****************
///Author: Wu Jian (2008-06-23)
///http ://regedit.cnblogs.com

///Description: Display a loading sign before the image is loaded, and display the image after the image is downloaded
Can automatically zoom the image
When this plug-in is used, the page can be loaded first, and the image can be loaded later.
Solve the problem that the layout needs to be expanded after the image is displayed before zooming in.
//Parameter settings:
scaling whether to automatically scale in equal proportions
width maximum height of the image
height maximum width of the image
loadpic path of the loading image
*/
jQuery.fn.LoadImage=function(scaling,width ,height,loadpic){
if(loadpic==null)loadpic="load3.gif";
return this.each(function(){
var t=$(this);
var src=$(this).attr("src")
var img=new Image();
//alert("Loading")
img.src=src;
// Automatically scale images
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);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if (img.height>height){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width (img.width);
t.height(img.height);
}
}
}
}
}
//It will be read automatically when processing ff Caching images
if(img.complete){
//alert("getToCache!");
autoScaling();
return;
}
$(this).attr ("src","");
var loading=$("Loading");

t.hide();
t.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
t.attr("src",this.src);
t.show();
//alert("finally!")
});

}) ;
}

Instructions for use:
$("div img").LoadImage(true,120,90);
The effect is as follows:
Test addresshttp://img.jb51.net/online/jqueryLoadImage/demo.htm
jquery image preloading automatic proportional scaling plug-in_jquery
File package download
Statement:
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