tangram框架響應式載入圖片方法_javascript技巧

各種網站經常看到頁面滾動到可視區域，然後才加載相應的圖片資源，他的本質是什麼呢？本文來分析很簡單，就是判斷目前元素是否為可視區域內

假設：h1 = 滾動條滾去的高度
w1 = 滾動條滾去的寬度
h2 = 螢幕的高度
obj 表示當前物件{x：當前物件相對於文檔左上角的位置x,y:目前物件相對於文件左上角的y}

則應該這樣判斷
在y軸方向上：if(obj.x>h1&&obj.x

h1&&|obj.x obj.offsetHeight

同理在X軸方向上以此類推

如果使用tangram框架的話可以這樣寫：

複製程式碼 程式碼如下:

baidu.more = baidu.more||{};

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

(pos.top obj.offsetHeight>top&& pos.top obj.offsetHeight

(pos.left>left&&pos.left

(pos.left obj.offsetWidth>left&&pos.left obj.offsetWidth

loading();

};

　return {

scrollLoad :scrollLoad

}　

})()