這次遇到的問題其實碰到很多次了,但是之前都沒有好好的解決

曾經以為是IE 載入圖檔過慢,還用了 setTimeout 

用一般 .load() 直接寫,IE 則是有時候可以有時候不行,然後就裝作解決了

然後提醒一下大家這次講的是事件

jQuery 的 load() 有兩種,一種是 AJAX load() method 一種是 document 的 load() event

附註 : 

AJAX method :  http://api.jquery.com/load/

document event : http://api.jquery.com/load-event/

============前言廢話結束============

發生的問題如下

如果在網頁上有個區塊,在那個區塊中你無法控制裡面圖片的大小

ex :  blog 裡面的文章可能是某個使用者貼 html 過來的,裡面的圖超大張會破版

如下圖整個破版

 Clipboard02

 

好了,相信大家一定早就知道怎麼做了

假設 html 如下 

 

<div id="container">

      <img src="a.jpg" />

      <img src="b.jpg" />

      <img src="c.jpg" />

</div>

 

jQuery :

//如果圖片寬度 > 670,width 就強制給 670px

$("#container img").load(function(){

if ($(this).width() > 670) {

$(this).css("width", "670px");

}

});

 

以上這樣寫在 chrome、firefox 裡都可以正常

但在 IE.............!@#$%

在 IE 之所以無法運作的原因是

1. IE 對圖檔的 cache 實在是莫名其妙,有圖必 cache

2. 好像不能直接用 $("img").load() 有時會抓不到

 

綜合以上兩點所以改成以下這樣就可以了

雖然這樣寫有點蠢而且好像浪費效能樣,但至少解決了

 

$("#container img").each(function(){

//在檔名後面多加個時間解決 cache 問題

$(this).attr("src", $(this).attr("src") + "?" + new Date().getTime());

$(this).load(function(){

if ($(this).width() > 670) {

$(this).css("width", "670px");

}

})

})

 

IE 看起來就完美,但還是奉勸大家別再用 IE 了

 Clipboard02

 

 

 

arrow
arrow
    全站熱搜

    小雕 發表在 痞客邦 留言(0) 人氣()