jquery 图片预加载 自动等比例缩放插件

祁浩丶Ta

祁浩丶Ta

2016-02-19 16:03

有了下面这个jquery 图片预加载 自动等比例缩放插件教程,不懂jquery 图片预加载 自动等比例缩放插件的也能装懂了,赶紧get起来装逼一下吧!

 

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

文件打包下载

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)代码如下:
/*
**************图片预加载插件******************
///作者:没剑(2008-06-23)
///http://regedit.cnblogs.com

///说明:在图片加载前显示一个加载标志,当图片下载完毕后显示图片出来
可对图片进行是否自动缩放功能
此插件使用时可让页面先加载,而图片后加载的方式,
解决了平时使用时要在图片显示出来后才能进行缩放时撑大布局的问题
///参数设置:
scaling 是否等比例自动缩放
width 图片最大高
height 图片最大宽
loadpic 加载中的图片路径
*/
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;
//自动缩放图片
var autoScaling=function(){
if(scaling){

if(img.width0 && img.height0){
if(img.width/img.height=width/height){
if(img.widthwidth){
t.width(width);
t.height((img.height*width)/img.width);
}else{
t.width(img.width);
t.height(img.height);
}
}
else{
if(img.heightheight){
t.height(height);
t.width((img.width*height)/img.height);
}else{
t.width(img.width);
t.height(img.height);
}
}
}
}
}
//处理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!")
});

});
}

使用说明:
$("div img").LoadImage(true,120,90);



展开更多 50%)
分享

猜你喜欢

jquery 图片预加载 自动等比例缩放插件

Web开发
jquery 图片预加载 自动等比例缩放插件

图片预加载并且自动等比例缩放的JS插件

Web开发
图片预加载并且自动等比例缩放的JS插件

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用CSS等比例缩放图片

Web开发
用CSS等比例缩放图片

jQuery autocomplete插件修改

Web开发
jQuery autocomplete插件修改

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery 插件开发 其实很简单

Web开发
jQuery 插件开发 其实很简单

JavaScript实现网页图片等比例缩放

Web开发
JavaScript实现网页图片等比例缩放

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

从JavaScript 到 JQuery (1)学习小结

从JavaScript 到 JQuery (1)学习小结

如何让windows10中的微软小娜只听你的话

如何让windows10中的微软小娜只听你的话
下拉加载更多内容 ↓