建站
咨詢
售后
建站咨詢
新聞中心
今天上午，一個(gè)客戶跟我聯(lián)系說(shuō)，剛給他做的網(wǎng)站，顯示不正常，我頓時(shí)一緊張，這是我獨(dú)立完成的第一個(gè)項(xiàng)目，于是趕緊打開(kāi)他的網(wǎng)站看了看，沒(méi)看出什么不正常來(lái)。我又問(wèn)他怎么不正常，他說(shuō)和交接項(xiàng)目時(shí)的效果不一樣，暈，交接時(shí)要是不正常，項(xiàng)目肯定交接不了啊，干脆讓他截個(gè)圖過(guò)來(lái)。果然不正常，是他剛上傳的一張圖片把顯示內(nèi)容的窗口撐開(kāi)了。查看代碼，明明寫(xiě)好了max-width，怎么還會(huì)出現(xiàn)這種情況。突然發(fā)現(xiàn)他發(fā)來(lái)的圖上，那個(gè)瀏覽器看著不順眼，像是古老的而神圣的IE6！經(jīng)過(guò)確認(rèn)，果然是它，又是它！我真是疏忽，沒(méi)給他在IE6下測(cè)試就交工了。
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、五蓮網(wǎng)絡(luò)推廣、小程序制作、五蓮網(wǎng)絡(luò)營(yíng)銷、五蓮企業(yè)策劃、五蓮品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供五蓮建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com
說(shuō)起IE6，真是讓我們這些做前端的人又恨又無(wú)奈，許多屬性都不支持。可不少用戶還在用它，我們也不能無(wú)視。為了兼容，我只好跟同事請(qǐng)教了一下，然后針對(duì)IE6用js縮放來(lái)顯示圖片并進(jìn)行了一些細(xì)節(jié)上的優(yōu)化。
盡管今天的這個(gè)客戶網(wǎng)站比較小，對(duì)網(wǎng)站性能的要求也不高，但考慮以后可能還會(huì)用到這些東西，做優(yōu)化是個(gè)長(zhǎng)期學(xué)習(xí)的過(guò)程，我查閱了一些文章，說(shuō)是如果利用img標(biāo)簽的onload方法來(lái)調(diào)用函數(shù)進(jìn)行尺寸的修改，對(duì)性能的影響比較大，另外，利用 -expression 行為似乎也不可?。ㄒ院罄^續(xù)求證吧），所以，最后是采用頁(yè)面加載時(shí)觸發(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屬性，原理比較簡(jiǎn)單，在這段代碼前面我還加了一個(gè)對(duì)IE6瀏覽器的判定，除了它以外，我還是讓CSS搞定圖片的尺寸。我在代碼中沒(méi)有定義圖片的高和寬的數(shù)值，這樣在縮放時(shí)，只要修改其中的一個(gè)數(shù)值，讓另一個(gè)數(shù)值去自適應(yīng)，而不是讓js去執(zhí)行等比縮放，這也算是一點(diǎn)點(diǎn)優(yōu)化吧。我在代碼中引用了Jquery（因?yàn)榱?xí)慣了），你沒(méi)必要這樣做，我之所以這么寫(xiě)，是在DOM元素返回以后可以統(tǒng)一進(jìn)行函數(shù)處理?？紤]到客戶經(jīng)常會(huì)使用外鏈的圖片，這時(shí)，網(wǎng)頁(yè)的顯示速度就受到圖片源的影響，所以在頁(yè)面加載時(shí)我先利用CSS把需要顯示的圖片隱藏，直到圖片縮放后再利用js的方法顯示圖片，因此，又對(duì)IE6做了個(gè)hack:
- img{
- display:inline !important;
- display:none;
- max-width:180px;
- }
原文鏈接：http://www.cnblogs.com/ilian/archive/2012/05/18/js-img-resize.html
網(wǎng)站標(biāo)題：javascript解決圖片縮放及其優(yōu)化
網(wǎng)址分享：http://www.5511xx.com/article/dhiisio.html
