Images_javascript 기술의 지연된 로딩을 구현하는 기본 javascript 방법

이 기사의 예에서는 기본 JavaScript를 사용하여 지연된 이미지 로드를 구현하는 방법을 설명합니다. 이미지 지연 로딩에는 실제로 jquery 플러그인이 있는데 로딩 방법이 매우 간단하고 합리적입니다. 하지만 일부 친구들은 jquery 플러그인 패키지 로딩이 너무 크다고 느껴서 Yu Shi가 직접 작성하여 여러분과 공유했습니다. .

우선, 이미지 로드를 지연하면 대역폭을 절약하고 특히 이미지가 많은 사이트의 경우 더 나은 사용자 경험을 제공할 수 있습니다. 이는 이미지 지연 로드의 원리와 구현 코드에 대해 논의해 보겠습니다.

이미지 로딩 지연 원칙

이미지 로딩 지연의 원칙은 HTML의 이미지 src가 실제 이미지 주소가 아니지만 이미지 주소가 src="img/loading.gif와 같은 사용자 정의 속성을 사용하여 img 태그에 할당된다는 것입니다. ” data-url="img/1.jpg" 그런 다음 js를 사용하여 브라우저 스크롤 막대 이벤트를 결정합니다. 특정 지점에 도달하면 사용자 정의 속성에 있는 이미지의 실제 주소를 현재 img 태그의 src에 할당합니다. , 이를 통해 동적 이미지 처리를 실현합니다. 실제 프로젝트에서 이러한 이미지의 주소는 ajax를 통해 전달되고 img의 사용자 정의 속성에 할당될 수 있습니다.

네이티브 JS를 사용한 이미지 로딩 지연의 예:

결국 텍스트 내용이 좀 지루한 것 같습니다. 간단한 데모를 작성하고 이제는 코드를 모두 게시해두었습니다. 필요한 친구들은 직접 복사하여 코드를 보고 이해할 수 있습니다.

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

<스타일>
    img{display:block;width:350px;height:245px;ground:url(img/loading.gif) 중앙 중앙 반복 없음}