JavaScript 이미지 지연 로딩 라이브러리 Echo.js_javascript 팁

Echo는 빠르고 작은 크기(1k 미만)이며 HTML5 data- 속성을 사용하는 독립적인 JavaScript 지연 이미지 로딩 도구입니다. 에코는 IE8+를 지원합니다.

플러그인 설명: Lazy Load와 마찬가지로 Echo.js도 이미지 지연 로딩을 위한 JavaScript입니다. 차이점은 Lazy Load는 jQuery 기반 플러그인인 반면, Echo.js는 jQuery나 다른 JavaScript 라이브러리에 의존하지 않고 독립적으로 사용할 수 있다는 것입니다. 그리고 Echo.js는 압축 후 1KB 미만으로 매우 작습니다.

호환성

Echo.js는 HTML5의 날짜 속성을 사용하며 이 속성의 값을 얻어야 하기 때문에 IE6, IE7과 호환되지 않습니다. 지연 로드도 HTML5 날짜 속성을 사용하지만 값을 얻는 방법은 다릅니다.

사용방법

　1. 파일 가져오기

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

e186917f42360ce89b568cf30c2894c52cacc6d41bbb37262a98f745aa00fbf0

　2. HTML

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

3b07d364e6c3d8e47cb51f97b541aee4

blank.gif는 1 x 1 이미지로 기본 이미지로 사용되며, data-echo 속성값은 이미지의 실제 주소입니다. 또한 이미지의 너비와 높이를 설정하거나 CSS에서 설정하는 것이 가장 좋습니다. 그렇지 않으면 맨 아래에 있는 것처럼 보이는 이미지가 로딩이 지연됩니다.

　

3. 자바스크립트

Echo.init({
offset: 0,
throttle: 0
}); 

매개변수

매개변수

설명

参数	说明
offset	离可视区域多少像素的图片可以被加载
throttle	图片延迟多少毫秒加载

오프셋

이미지를 로드할 수 있는 가시 영역에서 몇 픽셀 떨어진 곳에

스로틀

이미지 로딩 지연 시간은 몇 밀리초입니까

위 내용은 JavaScript 이미지 지연 로딩 라이브러리 Echo.js에 대한 내용입니다. 모든 분들께 도움이 되길 바랍니다!