推薦自用 Javascript 縮圖函數(shù) (onDOMLoaded)……

2024-05-06 14:18:53

字體：大中小

供稿：網(wǎng)友

070520：Norman 君給出了 Dean Edwards 等關(guān)于 onDOMLoaded 事件的跨瀏覽器解決方案……
其實 onDOMLoaded 是 DOM 被載入（圖片尚未載入）狀態(tài)下的一個“不存在的”事件……
由于不同瀏覽器的支持度不同……
所以需要進行 Hack ……
所幸 Dean 和其他一些朋友反復研究后給出了解決方案……
在此表示感謝……
對于縮圖函式本身的改進就是合并了上個版本的兩個不同模式（快速和平緩）……
所謂快速模式是用了 while 循環(huán)……
速度快但是容易造成假死……
所謂平緩模式則用 setInterval 函式來解決上述問題……
可惜 setInterval 有最短周期限制……
所以速度比較慢……
從快速到平緩模式的切換臨界值我設置為 500 ……
也即當一個頁面的圖片達到 500 時便啟用平緩模式來縮圖……
大伙兒可以根據(jù)自己需求更改……
具體請看 resizeImgs 函式的第二行……

070516：感謝 Norman 君在提升代碼性能上的建議……
將遍歷所有元素更改為遍歷圖像數(shù)組……
至于 Norman 所提議的在圖像讀取之前即進行縮圖的功能……
未能實現(xiàn)……
一來是因為 Firefox 并不支持 onreadystatechange 事件（只有 onload ？）……
二來則在測試中發(fā)現(xiàn) IE 下在 interactive 狀態(tài)下調(diào)整圖像大小也需要刷新以后才能執(zhí)行……
也就是說都得等到頁面加載完畢（或者加載一次）后才能進行操作……
恕鄙人才疏學淺……
如有解決方案望留言教授……

原理呢……
就是遍歷圖像數(shù)組……
如果定義了 resize 屬性就進行縮圖……
當 resize 的值為數(shù)字（而且小于原圖寬度）就縮小到該數(shù)字寬度……
當 resize 為其它值則縮小到預設寬度……
至于為什么要清除 height 屬性……
答曰：為了保持寬、高之比……
以上……

由于代碼過長……
暫不貼出……
使用方法請參看 Demo ……
//m.survivalescaperooms.com/test/resizeIMGs_1.2/index.html
本地下載

上一篇：javascript[js]獲取url參數(shù)的代碼

下一篇：不能再簡單的無閃刷新驗證碼原理很簡單