小雕雕的家

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

曾經以為是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 過來的，裡面的圖超大張會破版

如下圖整個破版

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

假設 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 了