利用javascript解決圖片縮放及其優(yōu)化的代碼
更新時間:2012年05月23日 22:20:07 作者:
說起IE6,真是讓我們這些做前端的人又恨又無奈,許多屬性都不支持。可不少用戶還在用它,我們也不能無視。為了兼容,我只好跟同事請教了一下,然后針對IE6用js縮放來顯示圖片并進行了一些細(xì)節(jié)上的優(yōu)化
一個客戶跟我聯(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縮放來顯示圖片并進行了一些細(xì)節(jié)上的優(yōu)化。
盡管今天的這個客戶網(wǎng)站比較小,對網(wǎng)站性能的要求也不高,但考慮以后可能還會用到這些東西,做優(yōu)化是個長期學(xué)習(xí)的過程,我查閱了一些文章,說是如果利用img標(biāo)簽的onload方法來調(diào)用函數(shù)進行尺寸的修改,對性能的影響比較大,另外,利用 -expression 行為似乎也不可?。ㄒ院罄^續(xù)求證吧),所以,最后是采用頁面加載時觸發(fā)。
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函數(shù)判斷,并且修改img.width屬性,原理比較簡單,在這段代碼前面我還加了一個對IE6瀏覽器的判定,除了它以外,我還是讓CSS搞定圖片的尺寸。我在代碼中沒有定義圖片的高和寬的數(shù)值,這樣在縮放時,只要修改其中的一個數(shù)值,讓另一個數(shù)值去自適應(yīng),而不是讓js去執(zhí)行等比縮放,這也算是一點點優(yōu)化吧。我在代碼中引用了Jquery(因為習(xí)慣了),你沒必要這樣做,我之所以這么寫,是在DOM元素返回以后可以統(tǒng)一進行函數(shù)處理??紤]到客戶經(jīng)常會使用外鏈的圖片,這時,網(wǎng)頁的顯示速度就受到圖片源的影響,所以在頁面加載時我先利用CSS把需要顯示的圖片隱藏,直到圖片縮放后再利用js的方法顯示圖片,因此,又對IE6做了個hack:
img{
display:inline !important;
display:none;
max-width:180px;
}
說起IE6,真是讓我們這些做前端的人又恨又無奈,許多屬性都不支持??刹簧儆脩暨€在用它,我們也不能無視。為了兼容,我只好跟同事請教了一下,然后針對IE6用js縮放來顯示圖片并進行了一些細(xì)節(jié)上的優(yōu)化。
盡管今天的這個客戶網(wǎng)站比較小,對網(wǎng)站性能的要求也不高,但考慮以后可能還會用到這些東西,做優(yōu)化是個長期學(xué)習(xí)的過程,我查閱了一些文章,說是如果利用img標(biāo)簽的onload方法來調(diào)用函數(shù)進行尺寸的修改,對性能的影響比較大,另外,利用 -expression 行為似乎也不可?。ㄒ院罄^續(xù)求證吧),所以,最后是采用頁面加載時觸發(fā)。
復(fù)制代碼 代碼如下:
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函數(shù)判斷,并且修改img.width屬性,原理比較簡單,在這段代碼前面我還加了一個對IE6瀏覽器的判定,除了它以外,我還是讓CSS搞定圖片的尺寸。我在代碼中沒有定義圖片的高和寬的數(shù)值,這樣在縮放時,只要修改其中的一個數(shù)值,讓另一個數(shù)值去自適應(yīng),而不是讓js去執(zhí)行等比縮放,這也算是一點點優(yōu)化吧。我在代碼中引用了Jquery(因為習(xí)慣了),你沒必要這樣做,我之所以這么寫,是在DOM元素返回以后可以統(tǒng)一進行函數(shù)處理??紤]到客戶經(jīng)常會使用外鏈的圖片,這時,網(wǎng)頁的顯示速度就受到圖片源的影響,所以在頁面加載時我先利用CSS把需要顯示的圖片隱藏,直到圖片縮放后再利用js的方法顯示圖片,因此,又對IE6做了個hack:
復(fù)制代碼 代碼如下:
img{
display:inline !important;
display:none;
max-width:180px;
}
相關(guān)文章
Javascript+CSS實現(xiàn)Flash動態(tài)新聞效果(pp原創(chuàng))
Javascript+CSS實現(xiàn)Flash動態(tài)新聞效果(pp原創(chuàng))2008-10-10
javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持
一般頁面的的圖片為了布局考慮,顯示大小都小于實際大小。 鼠標(biāo)在圖片上移動時,在旁邊展示一個跟此圖片顯示大小一樣的層。并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個層中。2009-04-04

