Various websites often see the page scroll to the visual area, and then load the corresponding image resources, what is the nature of it? In this article, the analysis is as simple as determining whether the current element is in the visual region

Suppose: h1 = the height of the scroll bar W1 = the width of the scroll bar H2 is the height of the screen Obj represents the current object {x: the position of the current object relative to the upper-left corner of the document x,y: the position of the current object relative to the upper-left corner of the document y}

That’s the way to judge it In the Y-axis direction: if(obj. H1 && obj. X< H1 h2 + | | obj. X + obj. OffsetHeight> H1 && | obj. X + obj. OffsetHeight< H1 + h2) {loading ()} And so on in the X direction

If you use the tangram framework, you can write:

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<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
}　
})()