Tangram 프레임워크 반응형 로딩 이미지 method_javascript 기술

다양한 웹사이트에서는 페이지가 표시 영역으로 스크롤된 다음 해당 이미지 리소스가 로드되는 경우가 많습니다. 이 글의 분석은 매우 간단합니다. 현재 요소가 가시 영역 내에 있는지 확인하는 것입니다.

가정: h1 = 롤아웃된 스크롤바의 높이
w1 = 롤아웃된 스크롤바의 너비
h2 = 화면의 높이
obj는 현재 객체를 나타냅니다. {x: 현재 문서의 왼쪽 상단 모서리를 기준으로 한 개체 위치 x,y: y}

문서의 왼쪽 상단을 기준으로 한 현재 개체의 위치

은 다음과 같이 판단되어야 합니다: if(obj.x>h1&&obj.x

h1&&|obj.x obj.offsetHeight

X축 방향에서도 마찬가지입니다

탱그램 프레임워크를 사용하는 경우 다음과 같이 작성할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

baidu.more = baidu.more|| {};
baidu.more.scrollLoading = (함수(){

var top = baidu.page.getScrollTop(),

왼쪽 = baidu.page.getScrollLeft(),

viewHeight = baidu.page.viewHeight(),

viewWidth = baidu.page.viewWidth();

var scrollLoad = 함수(요소){

var obj = baidu.g(요소)||{};

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

로드 중();

};

반환 {

scrollLoad :scrollLoad

}　

})()

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.