Tangram framework responsive loading image method_javascript skills

Various websites often see pages scrolling to the visible area and then loading the corresponding image resources. What is its essence? The analysis in this article is very simple, which is to determine whether the current element is within the visible area

Assumption: h1 = the height of the scroll bar rolled away
w1 = the width of the scroll bar rolled away
h2 = height of the screen
obj represents the current object {x: the current object relative to the upper left corner of the document Position x,y: y}

of the current object relative to the upper left corner of the document

should be judged like this: if(obj.x>h1&&obj.x

h1&&|obj.x obj.offsetHeight

The same applies in the X-axis direction

If you use the tangram framework, you can write like this:

Copy code 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&& pos.top obj.offsetHeight

(pos.left>left&&pos.left

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

loading();

};

return {

scrollLoad :scrollLoad

}　

})()

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn