一個客戶跟我聯(lián)系說，剛給他做的網(wǎng)站，顯示不正常，我頓時一緊張，這是我獨立完成的第一個項目，于是趕緊打開他的網(wǎng)站看了看，沒看出什么不正常來。我又問他怎么不正常，他說和交接項目時的效果不一樣，暈，交接時要是不正常，項目肯定交接不了啊，干脆讓他截個圖過來。果然不正常，是他剛上傳的一張圖片把顯示內(nèi)容的窗口撐開了。查看代碼，明明寫好了max-width，怎么還會出現(xiàn)這種情況。突然發(fā)現(xiàn)他發(fā)來的圖上，那個瀏覽器看著不順眼，像是古老的而神圣的IE6！經(jīng)過確認(rèn)，果然是它，又是它！我真是疏忽，沒給他在IE6下測試就交工了。

說起IE6，真是讓我們這些做前端的人又恨又無奈，許多屬性都不支持?？刹簧儆脩暨€在用它，我們也不能無視。為了兼容，我只好跟同事請教了一下，然后針對IE6用js縮放來顯示圖片并進(jìn)行了一些細(xì)節(jié)上的優(yōu)化。

盡管今天的這個客戶網(wǎng)站比較小，對網(wǎng)站性能的要求也不高，但考慮以后可能還會用到這些東西，做優(yōu)化是個長期學(xué)習(xí)的過程，我查閱了一些文章，說是如果利用img標(biāo)簽的onload方法來調(diào)用函數(shù)進(jìn)行尺寸的修改，對性能的影響比較大，另外，利用 -expression 行為似乎也不可?。ㄒ院罄^續(xù)求證吧），所以，最后是采用頁面加載時觸發(fā)。

這段代碼利用resizeImage函數(shù)判斷，并且修改img.width屬性，原理比較簡單，在這段代碼前面我還加了一個對IE6瀏覽器的判定，除了它以外，我還是讓CSS搞定圖片的尺寸。我在代碼中沒有定義圖片的高和寬的數(shù)值，這樣在縮放時，只要修改其中的一個數(shù)值，讓另一個數(shù)值去自適應(yīng)，而不是讓js去執(zhí)行等比縮放，這也算是一點點優(yōu)化吧。我在代碼中引用了Jquery（因為習(xí)慣了），你沒必要這樣做，我之所以這么寫，是在DOM元素返回以后可以統(tǒng)一進(jìn)行函數(shù)處理。考慮到客戶經(jīng)常會使用外鏈的圖片，這時，網(wǎng)頁的顯示速度就受到圖片源的影響，所以在頁面加載時我先利用CSS把需要顯示的圖片隱藏，直到圖片縮放后再利用js的方法顯示圖片，因此，又對IE6做了個hack:

最新評論