利用javascript解決圖片縮放及其最佳化的代碼

一個客戶跟我聯絡說，剛給他做的網站，顯示不正常，我頓時一緊張，這是我獨立完成的第一個項目，於是趕緊開啟他的網站看了看，沒看出什麼不正常來。我又問他怎麼不正常，他說和交接項目時的效果不一樣，暈，交接時要是不正常，項目肯定交接不了啊，乾脆讓他截個圖過來。果然不正常，是他剛上傳的一張圖片把顯示內容的視窗撐開了。查看代碼，明明寫好了max-width，怎麼還會出現這種情況。突然發現他發來的圖上，那個瀏覽器看著不順眼，像是古老的而神聖的IE6！經過確認，果然是它，又是它！我真是疏忽，沒給他在IE6下測試就交工了。

說起IE6，真是讓我們這些做前端的人又恨又無奈，許多屬性都不支援。可不少使用者還在用它，我們也不能無視。為了相容，我只好跟同事請教了一下，然後針對IE6用js縮放來顯示圖片並進行了一些細節上的最佳化。

儘管今天的這個客戶網站比較小，對網站效能的要求也不高，但考慮以後可能還會用到這些東西，做最佳化是個長期學習的過程，我查閱了一些文章，說是如果利用img標籤的onload方法來調用函數進行尺寸的修改，對效能的影響比較大，另外，利用 -expression 行為似乎也不可取（以後繼續求證吧），所以，最後是採用頁面載入時觸發。 複製代碼 代碼如下:function resizeImage(img,width){
var image=new Image();
image.src=img.src;
var temp = image.width;
img.width = temp = (temp>width)?width:temp;
img.style.display = "inline";
}
function doResize(){
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});
}
window.onload = doResize;

這段代碼利用resizeImage函數判斷，並且修改img.width屬性，原理比較簡單，在這段代碼前面我還加了一個對IE6瀏覽器的判定，除了它以外，我還是讓CSS搞定圖片的尺寸。我在代碼中沒有定義圖片的高和寬的數值，這樣在縮放時，只要修改其中的一個數值，讓另一個數值去自適應，而不是讓js去執行等比縮放，這也算是一點點最佳化吧。我在代碼中引用了Jquery（因為習慣了），你沒必要這樣做，我之所以這麼寫，是在DOM元素返回以後可以統一進行函數處理。考慮到客戶經常會使用外鏈的圖片，這時，網頁的顯示速度就受到圖片源的影響，所以在頁面載入時我先利用CSS把需要顯示的圖片隱藏，直到圖片縮放後再利用js的方法顯示圖片，因此，又對IE6做了個hack: 複製代碼 代碼如下:img{
display:inline !important;
display:none;
max-width:180px;
}