기본 JavaScript에서 이미지 지연을 실현하는 방법

저자：Eve Cole 업데이트 시간：2025-05-07 17:32:01

이 기사에서는 기본 JavaScript에서 이미지 지연 로딩을 실현하는 방법에 대해 설명합니다. 지연된 이미지 로딩에는 실제로 jQuery 플러그인이 있으며 로딩 방법은 매우 간단하고 합리적입니다. 그러나 일부 친구들은 jQuery 플러그인 패키지를로드하는 것이 너무 크다고 생각하기 때문에 여러분과 공유하기 위해 직접 썼습니다.

우선, 이미지 지연 로딩은 미국 대역폭을 절약하고 특히 많은 그림이있는 사이트의 경우 더 나은 사용자 경험을 얻을 수 있습니다. 이미지 지연의 원리 및 구현 코드에 대해 아래에로드하겠습니다.

사진 지연 로딩 원리

이미지 지연로드의 원리는 HTML의 이미지 SRC가 실제 이미지 주소로 채워지지 않지만 이미지 주소는 다음과 같은 사용자 정의 속성으로 IMG 태그에 할당된다는 것입니다. 특정 지점에 도달하면 사용자 정의 속성에서 이미지의 실제 주소가 현재 IMG 태그의 SRC에 할당되어 이미지의 동적 표시를 실현합니다. 실제 프로젝트에서 이러한 이미지의 주소는 Ajax를 통해 전달되어 IMG의 사용자 정의 속성에 할당 할 수 있습니다.

기본 JS는 이미지 지연로드 예제를 구현합니다.

텍스트 내용은 결국 약간 지루해 보입니다. 간단한 데모를 작성하고 이제 모든 코드를 게시합니다. 필요한 친구는 직접 복사 할 수 있으며 코드를 살펴본 후 이해하게됩니다.

다음과 같이 코드를 복사하십시오. <! doctype html>

<html>

<헤드>

<스타일>

img {display : 블록; 너비 : 350px; 높이 : 245px; 배경 : URL (IMG/Loading.gif) 센터 센터 No-Repeat}

</스타일>

</head>

<body>

</div>

var obj = document.getElementById ( "div"). getElementsByTagName ( "IMG"),

H = Window.innerHeight || Document.DocumentELement.ClientHeight;

for (var i = 0; i <obj.length; i ++) {

obj [i] .url = obj [i] .getAttribute ( "data-url");

obj [i] .top = obj [i] .offsettop;

obj [i] .flag = true; // 브라우저가 항상 사진을로드하지 않도록하여 사진이 성공적으로로드 된 후 브라우저를 스크롤 할 때 그림이로드되지 않습니다.

}

var fnload = function (obj) {

var t = document.body.scrolltop || document.documentElement.scrolltop;

if (t+h> obj.top+200 && obj.top> t) {// 사용자의로드 상태를 개선하기 위해 200을 제공하면 더 친숙합니다.

settimeout (function () {

obj.src = obj.url;

obj.flag = false;

}, 500)

}

window.onscroll = window.onload = function () {

for (var i = 0; i <obj.length; i ++) {

if (obj [i] .flag) {

fnload (obj [i]);

}

</스크립트>

</body>

</html>

이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.