javascript 이미지_javascript 기술의 지연 로딩 구현 방법 및 아이디어
May 16, 2016 pm 03:22 PM본 글의 예시에서는 자바스크립트를 통해 이미지 로딩을 지연시키는 방법을 소개하고 있으며, 참고용으로 공유합니다
웹 페이지에 많은 양의 사진이 포함되어 있는 경우 처음에 모든 사진이 로드되면 필연적으로 성능 및 효율성 문제가 발생하며 오랜 대기 시간으로 인해 사용자가 이탈할 수 있습니다.
이때 웹사이트의 친화력을 높이기 위해서는 지연 로딩, 즉 이미지 로딩을 지연시키는 방법을 사용해야 합니다.
1. 이미지 지연 로딩
기본 아이디어는 다음과 같습니다.
느리게 로드해야 하는 이미지에 대해lazy-src와 같은 사용자 정의 속성을 설정하고 이미지 소스에 대한 경로가 존재합니다. 그런 다음 지연 로드가 필요한 모든 이미지를 배열에 넣습니다. window.onscroll을 사용할 때 배열의 내용이 사용자의 시야에 나타나는지 판단하면 사용자 정의 속성 내용이 src에 할당됩니다. 이미지의 속성입니다.
구현 단계에 대해 자세히 이야기해 보겠습니다.
먼저 브라우저의 가시 영역 위치를 반환하는 함수를 정의해야 합니다.
1 2 3 4 5 6 7 8 9 10 11 12 |
|
그런 다음 로드할 리소스의 위치를 반환하는 함수를 정의합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
다음으로 두 개의 직사각형 영역이 교차하는지 확인하는 함수를 정의합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
마지막으로 이미지 리소스를 모니터링하고 사용자의 시야에 들어오면 리소스를 로드합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
물론 이것은 단지 아이디어일 뿐이지만 엔지니어링에 사용한다면 성능이나 호환성 등 아직 부족한 부분이 많습니다. 그래서 저는 jquery 플러그인을 추천합니다: lazyload
1. CSS 로딩이 완료되었는지 확인
그런데 웹페이지의 CSS 파일이 로드되었는지 판단하는 방법은 다음과 같습니다. 우리는 CSS가 실제로는 링크 노드인 외부 파일을 통해 도입된다는 것을 알고 있습니다. 따라서 CSS 파일이 성공적으로 완전히 로드되었는지 확인하려면 링크 노드의 sheet 속성 또는 sheet.cssRules 속성만 폴링하면 됩니다.
2. 이미지 로드 여부 확인
마찬가지로 img 태그에는 완전한 속성이 있으며 이 속성을 보려면 폴링만 하면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 |
|
3. 자바스크립트가 로드되었는지 확인
그럼 자바스크립트가 로드되었는지 어떻게 판단하나요? 스크립트 노드의 onload 메소드는 로딩이 완료된 후 실행됩니다. IE6과 IE7은 ReadyState로 판단할 수 있습니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.

인기 기사

인기 기사

뜨거운 기사 태그

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Xiaohongshu에 게시할 때 사진이 자동으로 저장되는 문제를 해결하는 방법은 무엇입니까? 포스팅 시 자동으로 저장되는 이미지는 어디에 있나요?

TikTok 댓글에 사진을 게시하는 방법은 무엇입니까? 댓글란에 있는 사진의 입구는 어디인가요?

Foxit PDF Reader를 사용하여 PDF 문서를 jpg 이미지로 변환하는 방법 - Foxit PDF Reader를 사용하여 PDF 문서를 jpg 이미지로 변환하는 방법

웹페이지의 이미지를 로드할 수 없으면 어떻게 해야 합니까? 6가지 솔루션
