|
|
其實 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
本地下載
JavaScript技術：推薦自用 Javascript 縮圖函數 (onDOMLoaded)……，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
