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

來源:互聯網
上載者:User

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
本地下載

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.