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. 파일 가져오기

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

　2. HTML

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

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

　

3. 자바스크립트

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

매개변수

매개변수

설명

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

오프셋

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

스로틀

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

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