1：實際需求
那麼我們的**卻為100%的使用者載入了 3個 螢幕的所有內容。如果可以按需載入內容。就可以節約更多資源，做更多好的應用。
2：解決方案
用客戶端語言來判斷使用者當前的可視範圍，只載入使用者可視範圍的內容。最主要的是。因為文字資訊，相對較小，其他多**內容相對占用伺服器流量更多。
3：演示例子(最後提供)
4：解析
首先我們要分析下，這個效果會有乙個 最外面的容器。他包涵了裡面需要延遲載入一些內容。容器一般可能是瀏覽器視窗本身(window)，或者乙個有滾動條的div。
ok，我們必須獲取這個容器的一些引數。比如 可視寬度，可視高度，水平卷去寬度，垂直卷去高度。我使用下面的程式。
4.1：獲取容器物件屬性
複製** **如下:
_this.docinfo=function(),db= (wf)? document.body : warpper,
dd=(wf) ? document.documentelement : warpper;
if(sys.ie)elseelse
} d.jtop=(wf) ? db.scrolltop+dd.scrolltop : db.scrolltop ;//垂直卷去高度
d.jleft=(wf) ? db.scrollleft+dd.scrollleft : db.scrollleft;//水平卷去寬度
//被卷去的寬度 window 使用兩個相加 div的捲曲就直接使用scrollleft就ok
$j("bbb").innerhtml=d.offh+','+d.offw+','+d.jtop+','+d.jleft
return d;
} //注意在非ie 瀏覽器下 獲取非window物件的可視區域 使用offsetheight 和 offsetwidth （跟ie 一樣）
//在非ie 下獲取 window物件的可視區域 則要使用 window.innerwidth 和window.innerheight
//也就是說在非ie 下的 window 和 非window 物件的 可視區域獲取是不一樣的。
4.2:獲取載入內容的資訊
我們主要獲取載入物件距離 頁面容器物件的距離 。
ie 6 7會有個bug
複製** **如下:
wtop=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsettop : warpper.offsettop,
wleft=sys.ie ? (sys.ie[1]=='6.0' || sys.ie[1]=='7.0') ? 0 : warpper.offsetleft : warpper.offsetleft,
複製** **如下:
getoff=function(o);
4.3:載入主程式
他主要負責載入當前在可視範圍內物件。那麼我們必須去遍歷所有要載入的物件。判斷物件是否在當前的載入中。
然後載入他。***會有乙個圖。（方法可能不太好）
複製** **如下:
_this.load=function()
} }
if( j >= imgs.length) }
我不太喜歡我的判斷程式，但是暫時沒找到，或者我沒理解更好的演算法。所以就先用這個了。
大體的意思：用容器的可視高度+容器滾動高度 - 物件距離距離容器距離 > 容器可視 + 物件本身高或寬 就證明在載入範圍。（繞口令）
我們還必須把 已經載入過的物件排除在外。因為載入過的物件也滿足以上公式，同時也可以少判斷一些。
imgs[i][1]=undefined;
if(imgs[i][1] != undefined){//判斷當前物件是否已經載入過
特別注意（看圖）
看上圖 a b c d。 分別有4個不同的角露在了 可視範圍內。所以這4個物件是需要載入的。
如果只考慮物件的某個點，或者某個線來判斷物件是否在可視範圍，可能帶來不好的體驗。
由於有上面這種情況，也給我們的程式設計（判斷是否在可視範圍內）增加了難度。
我上面的方法，是可以完成了。（如果有發現bug ，請給我指點。其實我也有點暈了。）
最後還有幾個技巧，比如
1：物件全部載入完了。就應該去掉容器物件事件觸發。
2：盡量優化判斷物件是否在可視範圍，或者遍歷的物件的演算法。可以節約很多瀏覽器資源。
3：cloudgamer 還提到乙個 延遲觸發，就是快速的滑動滾動條，延遲一下也是乙個小的優化。
5：推薦文章
cloudgamer 的 他講的很詳細，也比我做的要好。所以推薦去學習他的這個效果哦。很多東西我也借鑑他的。
還有就是感謝他的指點。 lazyload 延遲載入效果
6:我的原始碼
複製** **如下:
程式設計客棧;!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "">
lazyload
zmhnwiv class="jelle_box">
程式設計客棧t;
zmhnwlass="jelle_box">
Vant按需載入
librarydirectory 複製 按需引入vant元件 import from vant 複製 使用vant元件 vue.use datetimepicker use button use list 複製 type primary 按鈕複製 複製 ps 出來vant庫外，像antiui ele...
antd按需載入
antd 是螞蟻金服推出的一套非常好的react ui庫,使用起來特別方便,而且也推出了antd手機端庫,同時還推出了vue的使用方式 import react from react import from antd import antd dist antd.css return 按鈕 在antd...
lodash按需載入
lodash提供了很多可用的方法供我們使用，是乙個很好用且用起來得心應手的工具庫。但是同時，lodash的體積也不小，我們在使用的時候可能只是使用了幾個方法，但是卻把整個lodash庫引入了。殺雞用了牛刀的感覺！對於這個問題，有幾種方案可供選擇。一.引入單個函式 lodash整個安裝完之後，引用方式...