How to load images in a responsive manner using the tangram framework _ javascript tips-js tutorial

This article mainly introduces how to use the tangram framework to load images in a responsive manner. You can refer to using various websites to often see the page rolling 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. xh1 & | obj. x + obj. offsetHeight, similarly, in the x axis direction, and so on

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

The 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

(Pos. top + obj. offsetHeight> top & amp; pos. top + obj. offsetHeight

(Pos. left> left & amp; pos. left

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

Loading ();

};

Return {

ScrollLoad: scrollLoad

}

})()