지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > Tangram 프레임워크 반응형 로딩 이미지 method_javascript 기술

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

WBOY
풀어 주다： 2016-05-16 17:13:19
원래의
1228명이 탐색했습니다.

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

가정: 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

}　

})()


관련 라벨：
响应式加载 tangram
원천：php.cn
이전 기사：JS_기본 지식의 두 가지 정의 방법의 차이점과 내부 원리 다음 기사：입력 값을 조작하는 다양한 jQuery 방법 요약_jquery
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
쿼리와 수식은 새 열로 전체 테이블을 형성합니다. 여기서 새 열은 다른 조건부 열 값을 포함하는 수식입니다. 편집: 수식은 "값" 열(카테고리를 기준으로 user_id가 가장 낮은 "값" 열)이어야 합니다. 따라서 카테고리 "...
에서 2024-04-06 21:23:40
0
2
530
ASP 클래식 코드를 MYSQL 데이터베이스에 문자열로 저장할 가능성 ASP 클래식 코드를 MySQL 데이터베이스에 저장하고 끌어올 때 코드를 실행하도록 할 수 있습니까? 예를 들어 변수 이름을 문자열에 저장하고 표시하기 전에 AS...
에서 2024-04-06 13:38:43
0
1
358
"Cookie" 요청 헤더의 쿠키 수가 "set-cookie" 응답 헤더에 설정된 쿠키 수를 초과하는 이유는 무엇입니까? 저는 웹 크롤링의 초보자이므로 http 요청에 대한 이해가 매우 얕습니다. 장바구니에 추가와 같이 웹사이트에 보내는 특정 요청을 검사할 때 개발 도구는 해당 요청...
에서 2024-04-05 14:52:06
0
1
3571
POST 요청은 Postman을 사용할 때 잘 작동하지만 React axios 및 Spring Boot 백엔드를 사용할 때는 작동하지 않습니다. 반응 콘솔에서 "리소스를 로드할 수 없습니다: 서버 응답 상태는 500()"이라는 오류 메시지가 나타납니다. SpringBoot 백엔드에서 &q...
에서 2024-04-05 13:07:01
0
1
396
nginx Proxy_pass 설정을 수정한 후 내 React 앱이 로드되지 않습니다. ReactappNodeJS 백엔드와 nginx가 있습니다. 인증서를 받아 Certbot을 통해 설치했습니다. 내 애플리케이션에서는 get 및 post 요청을 수행...
에서 2024-04-05 11:53:10
0
1
316
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿