jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼
更新時間:2011年10月04日 19:42:18 作者:
jQuery圖片預(yù)加載 等比縮放實現(xiàn)代碼,需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
/*
* 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實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- jquery 圖片預(yù)加載 自動等比例縮放插件
- 基于JQuery實現(xiàn)的圖片自動進行縮放和裁剪處理
- jquery 圖片縮放拖動的簡單實例
- jquery實現(xiàn)圖片按比例縮放示例
- 基于jquery實現(xiàn)圖片相關(guān)操作(重繪、獲取尺寸、調(diào)整大小、縮放)
- jQuery實現(xiàn)的鼠標滾輪控制圖片縮放功能實例
- jQuery圖片縮放插件smartZoom使用實例詳解
- JQuery 圖片延遲加載并等比縮放插件
- 基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
- jQuery實現(xiàn)的移動端圖片縮放功能組件示例
相關(guān)文章
JQuery插件Marquee.js實現(xiàn)無縫滾動效果
這篇文章主要介紹了JQuery插件Marquee.js實現(xiàn)無縫滾動效果的相關(guān)資料,需要的朋友可以參考下2016-04-04jquery ui 1.7 ui.tabs 動態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)
jquery ui 1.7 ui.tabs 動態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)實現(xiàn)代碼,需要的朋友可以參考下。2010-04-04