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

2019-11-21 01:54:05

字體：大中小

供稿：網(wǎng)友

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

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

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

由于代碼過(guò)長(zhǎng)……
暫不貼出……
使用方法請(qǐng)參看 Demo ……
//m.survivalescaperooms.com/test/resizeIMGs_1.2/index.html
本地下載

上一篇：用javascript來(lái)實(shí)現(xiàn)select標(biāo)簽的美化的代碼

下一篇：不用確認(rèn)即可打印的javascript代碼