頁面加載後，對不合比例的圖片自動進行縮放和裁剪處理，兼容圖像已在緩存或不在緩存的情況，基於JQuery
其實很早就想寫一個這樣的效果，至於原因？進來這個筆記，我相信你懂的。 一般門戶網站，缺少不了大量的圖片展示，而為了網站美觀，圖片又有各種不同尺寸，專業的網站編輯人員，會把圖片處理成等比例的圖片再上傳，把網站弄得很好看，可惜，我想說，我遇到90%的網站編輯人員都是不專業的。 為了不讓網站編輯人員毀掉我的心血，我決定做這樣一個事情。 1、首先，在CSS裡對圖片定義好大小，如果JS不執行，就能看到拉伸的圖片，也就是最正常的表現； 2、對每個定義圖片大小的CSS多定義一個不常用的容器，這裡我選用了斜體標簽<cite></cite>，並定義其CSS與同根img的CSS一模一樣，並定義該容器裡的img的CSS樣式回歸margin:0;padding:0; 我是這樣做的： 代碼如下: /*公用*/ cite{display:block;overflow:hidden;overflow:hidden !important;} /*某容器*/ #BigPic img{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;} #BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;} #BigPic cite img{display:block;margin:0px;padding:0px;border:none;} 3、定義圖片處理函數，參考圖片被定義的大小和原始大小，在保持比例的前提下填充滿位置，再裝進裁剪容器； 我的代碼： 代碼如下: //圖片尺寸判斷與處理，用裁剪容器包圍 - By COoL function cutImgz(obj){ var image=new Image(); image.src=obj.src; $this=$(obj); var iwidth=$this.width();//獲取在CSS裡固定的圖片顯示寬度 var iheight=$this.height();//獲取在CSS裡固定的圖片顯示高度 if(1*image.width*iheight!=1*iwidth*image.height){ //原始圖片的尺寸與CSS裡固定的圖片尺寸比例不一致，則進行處理 if(image.width/image.height>=iwidth/iheight){ $this.height(iheight+'px'); $this.width((image.width*iheight)/image.height+'px'); } else{ $this.width(iwidth+'px'); $this.height((image.height*iwidth)/image.width+'px'); } //用cite裝起來，做出裁剪效果 $this.wrap('<cite />'); } } 4、在加載頁面時遍歷所有圖片，判斷其是否在緩存中，在緩存中則直接進行處理，不在緩存中則通過onload觸發處理； （因為在緩存的圖片秒load，在定義onload事件之前就已經load好，導致onload事件不被觸發；而不在緩存的圖片，若直接處理，圖片未load出來，原始尺寸會被Image對象認為是空圖，width和height都是0） 我的代碼： 代碼如下: $('img').each(function(){ var image=new Image(); image.src=this.src; if(image.complete){ //存在緩存中，立即處理 cutImgz(this); } else{ //不存在緩存中，onload處理 this.onload=function(){ cutImgz(this); } } });