最近在做一些前端頁面，設計師給的效果圖比較炫麗，為了達到頁面的高還原度，不得不用js來控制頁面的展示細節了。
現在的需求是，當渲染頁面中那些需要加載外部地址數據的節點元素時，比如圖片，在移動端往往需要自適應格局，而一些其他的頁面元素，可能需要根據相關
圖片
自適應后的大小后，來調整其自身的大小。
先是在網上搜了下解決方案，給的無非都是onload事件和
complete狀態判斷，這兩種解決方法我都試過，並不能很完美的解決我的需求。
我先說說他們存在的問題，以下都用圖片元素來做案例，調試環境是chrome瀏覽器，或許我研究的不夠深入，若有不對的，歡迎大家一定要留言指正。共同學習。
1、onload方法。（圖片加載完成后的觸發事件）
瀏覽器對
這個事件並不總是執行。只有在圖片沒有被緩存過時，才會執行。如果要用這個方法，是不是要配合頁面頭部no-cache呢，這點我沒試，因為我覺得得不償失。
（ps，當我本地開發，服務器和客戶端在同一台機器上，onload事件卻總是執行的。這點會不會是瀏覽器自身的策越就不得而知了。畢竟不能為了這個去研究瀏覽器的內核吧，還是得去找通用的兼容方案。）
接下來肯定有人會想到 new Image() 方法來讓瀏覽器每次都去加載一下圖片，但這個方法引入了另一個問題，
new Image()
加載進來的圖片是原圖片的尺寸，而不是適應了頁面大小之后的尺寸，已經違背了初衷。
2、
complete狀態判斷（
IE專屬值
）
這個不多說了，其實和上面是一路的。
不論我是在頁面底部，在全局onload事件下，還是在全局onreday事件下，都不能完全命中自適應后的圖片尺寸。
也就說圖片緩存的情況，網絡的情況，不同瀏覽器的情況，頁面被調整大小的情況，都對
自適應后的圖片尺寸抓取時機會有影響。
與其糾結於尋找圖片到底何時完整顯示的事件或狀態值，不如換個角度，用野蠻一點的方案來解決。
我的方案如下，先上代碼。
//根據獎池外殼圖片大小計算獎池元素高度 var show_prize_pool = function() { var pool_light_h = $('img.pool_light').height(); //console.log(pool_light_h); $('.prize_pool_item').css('height', pool_light_h / 3.5); $('.prize_pool_item img').css('height', pool_light_h / 3.5 * 0.6); $('.prize_pool_item p.prize_title').css('height', pool_light_h / 3.5 * 0.2); $('.prize_pool_item p.prize_price').css('height', pool_light_h / 3.5 * 0.2); $('.prize_pool_item .prize_pool_doButton img').css('height', pool_light_h / 3.5); $('.prize_pool_item .prize_pool_doButton span').css('bottom', pool_light_h / 3.5 * 0.15); $('.prize_pool_item').show(); if(pool_light_h>0){ clearInterval(global_timename4pool); } } //由於無法判斷圖片顯示完整的時機，只好用定時器來做，計算完成后再關掉定時器。 global_timename4pool = setInterval("show_prize_pool()",1500); //頁面大小改變后，要再次計算獎池元素的高度。 $(window).resize(function(){ show_prize_pool(); });
簡單說明下：
1、
$
(
'img.pool_light'
)這個是一個圖片，作為一個背景框，類似相框。
2、
$
(
'.prize_pool_item'
)這個是相框內的元素。
由於頁面的尺寸不固定，相框的圖片要根據寬度100%，高度自適應來不變形的展示相框圖片。
但是相框內的元素在不知道相框高度的時候，是無法設置自身高度為一個合適的值，來很好的填充相框。
這種情況只能依靠js來動態計算。所有就有了上面的需求。
我的解決方案，就是用定時器間隔一段時間就去查找圖片的高度是否出來了。直到得到想要的數據后，關掉定制器。在頁面被改變大小后，再去執行一次。
經過測試，這個方案犧牲一點點頁面性能，但是完美的解決了我的需求。若大家覺得適用，也試試吧。