jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
更新時(shí)間:2011年10月04日 19:42:18 作者:
jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼,需要的朋友可以參考下。
復(fù)制代碼 代碼如下:
/*
* Image preload and auto zoom
* scaling 是否等比例自動(dòng)縮放
* 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;
//自動(dòng)縮放圖片
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下會(huì)自動(dòng)讀取緩存圖片
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實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- jquery 圖片預(yù)加載 自動(dòng)等比例縮放插件
- 基于JQuery實(shí)現(xiàn)的圖片自動(dòng)進(jìn)行縮放和裁剪處理
- jquery 圖片縮放拖動(dòng)的簡(jiǎn)單實(shí)例
- jquery實(shí)現(xiàn)圖片按比例縮放示例
- 基于jquery實(shí)現(xiàn)圖片相關(guān)操作(重繪、獲取尺寸、調(diào)整大小、縮放)
- jQuery實(shí)現(xiàn)的鼠標(biāo)滾輪控制圖片縮放功能實(shí)例
- jQuery圖片縮放插件smartZoom使用實(shí)例詳解
- JQuery 圖片延遲加載并等比縮放插件
- 基于jquery的防止大圖片撐破頁(yè)面的實(shí)現(xiàn)代碼(立即縮放)
- jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
相關(guān)文章
jquery 無(wú)限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)
下面小編就為大家?guī)?lái)一篇jquery 無(wú)限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05JQuery插件Marquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
這篇文章主要介紹了JQuery插件Marquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2016-04-04jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示
這篇文章主要向大家推薦了一個(gè)jquery無(wú)限級(jí)聯(lián)下拉菜單簡(jiǎn)單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-1111個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道,在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來(lái)實(shí)現(xiàn)的話是很困難的,今天使用jquery插件,你可以實(shí)現(xiàn)卓越的排版效果,專門用于為您提高您的排版水平2012-09-09jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)
jquery ui 1.7 ui.tabs 動(dòng)態(tài)添加與關(guān)閉(按鈕關(guān)閉+雙擊關(guān)閉)實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04