Tangram Frame Response Loading picture method _javascript Skills

A variety of Web sites often see the page scrolling to the viewable area, and then load the corresponding picture resources, what is his essence? This article to analyze is very simple, is to determine whether the current element is in the visual region

Hypothesis: H1 = scroll height of roll bar
W1 = The width of the scroll bar to roll
H2 = 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 current object's Y} relative to the upper-left corner of the document

You should judge that.
In the y-axis direction: if (obj.x>h1&&obj.xAnd so on the x axis.

If you use the Tangram framework, you can write this:

Copy Code code as follows:

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

}

})()