前面做了個招聘頁面，裡面有大量的圖檔需要加載。
一開始都是全部寫在頁面中，在測試環境還看不出很慢，一放到正式環境就不對了。
微信浏覽器本來就覺得慢，現在一下子要加載這麼多圖檔，一下子就把螢幕弄白了，過了幾十秒後才會完整的出現Loading圖檔。
這顯然是無法忍受的，馬上就加了預加載的功能，我隻是簡單的使用了一下。
我先給img賦個空白圖，然後通過JS來給src賦data-src中的值，預加載的邏輯從網上找到了相關代碼。
還配備了YSlow和PageSpeed性能工具。
在Waterfall中有資源加載記錄，加了data-src屬性的圖檔會在JS腳本之後再載入，這樣的話就不會影響Loading效果顯示了。
一般懶加載就是當你做滾動到頁面某個位置，然後再顯示目前位置的圖檔，這樣做可以減少頁面請求。
當頁面過長的時候就會出現滾動條，而當年滾動到下面的時候，上面的頁面就會看不到，下圖中綠色部分就是那隐藏的頁面。
通過計算，可以擷取圖檔的兩個距離值，圖中标注了，然後判斷是否在目前可視區域的頂部和底部的範圍内，如果是就加載圖，不是就不加載。
假設滾動條是在body中，那麼目前可視區域的範圍是：
而圖檔的top和height是：
在上面出現了幾個尺寸的概念。
最後在給某個容器綁定“scroll”事件，上面的話是給“window”綁定。
參考資料：
<a href="http://www.cnblogs.com/v10258/p/3376455.html" target="_blank">Javascript圖檔預加載詳解</a>
本文轉自 咖啡機（K.F.J） 部落格園部落格，原文連結：http://www.cnblogs.com/strick/p/5372694.html，如需轉載請自行聯系原作者