(1) 等選定的圖片完整載入
(2) 取得圖片寬度
(3) 平均分配寬度給 frame_top2 和 frame_top_4 兩欄
使用 jQuery 通常會把一些想要對網頁做的處理動作放在 .ready() 裡，以確保在網頁真的下載完全後，才開始動作。
還以為 jQuery 真這麼萬能，把所有的程式都塞到 .ready() 裡就對了，沒想到哈哈哈，好像沒有這麼好的事。
上面的程式碼好像沒問題，加圖片進去，然後取得圖片的寬度，原本在自己的電腦上測試也都行，但上傳到遠端伺服器的空間後，咦，不 work，大打擊。試過幾次後，發現是圖片還沒完全下載完成，上面的寫法會造成 document ready 的時間，和圖片從伺服器下載完成的時間不同步，也因為 local 端太快了，才沒發現有問題。即使 .ready() 會等圖片之類的東西完全下載完才會被呼叫，但因程式在 .ready() 裡才去取得要下載的圖片檔名，再 append 到 html 中 (line 5 ~ line 7)。
要確定圖片下載完成後再取得圖片寬度，可以透過 JavaScript 的 document.readyState 和 setTimeout() 來達成。
document.readyState 會回傳四種狀態 (Firefox 不支援)：
(1) uninitialized - Has not started loading yet
(2) loading - Is loading
(3) interactive - Has loaded enough and the user can interact with it
(4) complete - Fully loaded
如果執行到這行程式時 (line 10) 的狀態還不是 complete，setTimeout( arguments.callee, 100 ); 會讓網頁每隔 100 毫秒再重 load 一次，直到 document.readyState == "complete" (line 11)。加了這幾行進去後，判斷 img 物件存不存的步驟 (line 5) 就非寫不可了，沒有這行判斷，在圖片還沒下載完成之前，img 會一直 append 上去，壯觀的咧…
JavaScript 的 setTimeout(code, millisec) 方法通常是讓程式每隔一段時間 (以毫秒計，1000 ms = 1s) 後再呼叫某個函式。W3 Schools 網站真的不錯，範例簡單易懂，不管是 JavaScript、css或 html 的規格都查的到。
兩個實用的網站，可以用來驗證網頁的原始碼是否符合 W3 的規格，檢查出的警告或錯誤，它會給建議或告訴你可能是哪裡有問題，可以參考參考。
(1) W3C HTML Validator
(2) W3C CSS Validator
最後的程式碼：
* getValue() 是要取得從網址帶進來的參數，詳情可參考用 JavaScript 傳遞參數
--
吼，剛剛才發現其實在 append() 之後，再加一行 img_obj = $('img'); 就不會有問題了 =.= 從頭到尾根本就是原本我的寫法有 bug !! (2011/2/2)
No comments:
Post a Comment