Tangram framework response-based image Loading Method

Various websites often see pages scroll to the visible area before loading the corresponding image resources. What is his nature? This article analyzes whether the current element is in a visible area.

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

This is the case.
In the Y axis direction: if (obj. x> h1 & obj. x

Similarly, in the X axis direction, and so on.

If you use the tangram framework, you can write as follows:

Copy codeThe Code is 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

}

})()