070520:Norman 君給出了 Dean Edwards 等關於 onDOMLoaded 事件的跨瀏覽器解決方案……
其實 onDOMLoaded 是 DOM 被載入(圖片尚未載入)狀態下的一個“不存在的”事件……
由於不同瀏覽器的支援度不同……
所以需要進行 Hack ……
所幸 Dean 和其他一些朋友反覆研究後給出瞭解決方案……
在此表示感謝……
對於縮圖函式本身的改進就是合并了上個版本的兩個不同模式(快速和平緩)……
所謂快速模式是用了 while 迴圈……
速度快但是容易造成假死……
所謂平緩模式則用 setInterval 函式來解決上述問題……
可惜 setInterval 有最短周期限制……
所以速度比較慢……
從快速到平緩模式的切換臨界值我設定為 500 ……
也即當一個頁面的圖片達到 500 時便啟用平緩模式來縮圖……
大伙兒可以根據自己需求更改……
具體請看 resizeImgs 函式的第二行……
070516:感謝 Norman 君在提升代碼效能上的建議……
將遍曆所有元素更改為遍曆映像數組……
至於 Norman 所提議的在映像讀取之前即進行縮圖的功能……
未能實現……
一來是因為 Firefox 並不支援 onreadystatechange 事件(只有 onload ?)……
二來則在測試中發現 IE 下在 interactive 狀態下調整映像大小也需要重新整理以後才能執行……
也就是說都得等到頁面載入完畢(或者載入一次)後才能進行操作……
恕鄙人才疏學淺……
如有解決方案望留言教授……
原理呢……
就是遍曆映像數組……
如果定義了 resize 屬性就進行縮圖……
當 resize 的值為數字(而且小於原圖寬度)就縮小到該數字寬度……
當 resize 為其它值則縮小到預設寬度……
至於為什麼要清除 height 屬性……
答曰:為了保持寬、高之比……
以上……
由於代碼過長……
暫不貼出……
使用方法請參看 Demo ……
http://www.jb51.net/test/resizeIMGs_1.2/index.html
本地下載