手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery图片预加载 等比缩放实现代码
jQuery图片预加载 等比缩放实现代码
摘要:复制代码代码如下:/**Imagepreloadandautozoom*scaling是否等比例自动缩放*width图片最大高*height...

复制代码 代码如下:

/*

* Image preload and auto zoom

* scaling 是否等比例自动缩放

* width 图片最大高

* height 图片最大宽

* loadpic 加载中的图片路径

* 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;

//自动缩放图片

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);

}

}

}

}

}

//处理ff下会自动读取缓存图片

if(img.complete){

//alert("getToCache!");

autoScaling();

return;

}

$(this).attr("src","");

var loading=$("<img alt="加载中..." title="图片加载中..." src=""+loadpic+"" />");

t.hide();

t.after(loading);

$(img).load(function(){

autoScaling();

loading.remove();

t.attr("src",this.src);

t.show();

//alert("finally!")

});

});

}

【jQuery图片预加载 等比缩放实现代码】相关文章:

鼠标图片振动代码

网页里控制图片大小的相关代码

jQuery处理图片加载失败的常用方法

jQuery常用知识点总结以及平时封装常用函数

Jquery实现动态切换图片的方法

JS函数实现鼠标指向图片后显示大图代码

jquery预加载图片的方法

jquery插件validation实现验证身份证号等

JQuery球队选择实例

图片按比例缩放函数

精品推荐
分类导航