jQuery圖片預(yù)加載 等比縮放實(shí)現(xiàn)代碼
更新時(shí)間:2011年10月04日 19:42:18 作者:
jQuery圖片預(yù)加載 等比縮放實(shí)現(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實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
- jquery 圖片預(yù)加載 自動等比例縮放插件
- 基于JQuery實(shí)現(xiàn)的圖片自動進(jìn)行縮放和裁剪處理
- jquery 圖片縮放拖動的簡單實(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的防止大圖片撐破頁面的實(shí)現(xiàn)代碼(立即縮放)
- jQuery實(shí)現(xiàn)的移動端圖片縮放功能組件示例
相關(guān)文章
jquery 無限極下拉菜單的簡單實(shí)例(精簡濃縮版)
下面小編就為大家?guī)硪黄猨query 無限極下拉菜單的簡單實(shí)例(精簡濃縮版)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動效果
這篇文章主要介紹了JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動效果的相關(guān)資料,需要的朋友可以參考下2016-04-04
jquery無限級聯(lián)下拉菜單簡單實(shí)例演示
這篇文章主要向大家推薦了一個(gè)jquery無限級聯(lián)下拉菜單簡單實(shí)例演示,感興趣的小伙伴們可以參考一下2015-11-11
11個(gè)用于提高排版水平的基于jquery的文字效果插件
我們都知道,在傳統(tǒng)的排版當(dāng)中使用DIV+CSS來實(shí)現(xiàn)的話是很困難的,今天使用jquery插件,你可以實(shí)現(xiàn)卓越的排版效果,專門用于為您提高您的排版水平2012-09-09
jquery 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)閉)實(shí)現(xiàn)代碼,需要的朋友可以參考下。2010-04-04

