各種網(wǎng)站經(jīng)常看到頁(yè)面滾動(dòng)到可視區(qū)域，然后才加載相應(yīng)的圖片資源，他的本質(zhì)是什么呢？本文來(lái)分析一下很簡(jiǎn)單，就是判斷當(dāng)前元素是否是可視區(qū)域內(nèi)
假設(shè)：h1 = 滾動(dòng)條滾去的高度
w1 = 滾動(dòng)條滾去的寬度
h2 = 屏幕的高度
obj 表示當(dāng)前對(duì)象 {x：當(dāng)前對(duì)象相對(duì)于文檔左上角的位置x,y:當(dāng)前對(duì)象相對(duì)于文檔左上角的y}
則應(yīng)該這樣判斷
在y軸方向上：if(obj.x>h1&&obj.x<h1+h2||obj.x+obj.offsetHeight>h1&&|obj.x+obj.offsetHeight<h1+h2){loading()}
同理在X軸方向上以此類推
如果使用tangram框架的話可以這樣寫(xiě)：
baidu.more.scrollLoading = (function(){
var top = baidu.page.getScrollTop(),
left = baidu.page.getScrollLeft(),
viewHeight = baidu.page.viewHeight(),
viewWidth = baidu.page.viewWidth();
var scrollLoad = function(element){
var obj = baidu.g(element)||{};
var pos = baidu.dom.getPosition(element);
if((pos.top>top&&pos.top<top+viewHeight)||
(pos.top+obj.offsetHeight>top&& pos.top+obj.offsetHeight<top+viewHeight)||
(pos.left>left&&pos.left<left+viewWidth)||
(pos.left+obj.offsetWidth>left&&pos.left+obj.offsetWidth<left+viewWidth)){
loading();
};
return {
scrollLoad :scrollLoad
}
})()
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
