Javascript의 이미지 지연 로딩에 대한 자세한 설명

이 글에서는 주로 Javascript의 이미지 지연 로딩에 대한 자세한 설명을 소개합니다. 지연 로딩과 비동기 로딩에 대한 자세한 설명과 사용법은

Javascript의 이미지 지연 로딩을 참조하세요. 예

기능: 페이지 열기 속도 보장(페이지가 3초 이내에 열리지 않으면 데드 페이지로 간주)

원칙:

1) 첫 번째 화면 콘텐츠의 그림 : 첫 번째 제공 기본 사진은 해당 영역을 차지합니다(기본 사진은 매우 작아야 하며 일반적으로 5kb 이내로 유지될 수 있음). 첫 번째 화면 콘텐츠가 로드되면(또는 지연 시간이 제공될 수 있음) 실제 사진이 표시됩니다. 다시 로드

2) 다른 화면의 사진: 기본 사진이 자리 표시자로도 사용됩니다. 스크롤 막대가 해당 영역으로 스크롤되면 실제 사진 로드가 시작됩니다.

확장: 데이터의 비동기 로드: only 처음 두 화면 데이터가 로드되어 바인딩되고 후속 데이터는 처리되지 않습니다. 페이지가 해당 영역으로 스크롤되면 데이터가 다시 요청된 다음 렌더링 데이터가 바인딩됩니다. 태그를 비우고 imgdisplay:none을 설정합니다. 배경 이미지를 외부 p의 배경 이미지에 바인딩한 다음 페이지가 로드될 때까지 기다린 후 이미지를 로드합니다.

타이머 또는 window.onload 이벤트를 사용한 다음; 얻은 URL 주소를 img 태그의 src 요소에 바인딩합니다. 그러나 얻은 실제 이미지 주소가 잘못된 src 주소인 경우 콘솔에서 오류를 보고할 뿐만 아니라 깨진 이미지/포크 이미지도 페이지에 나타납니다. 다음은 비전에 영향을 미치는 처리 이벤트입니다

 var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //释放空标签

 }

웹사이트 성능 최적화:

1. 서버에 대한 요청 수를 최소화하고 "HTTP 요청을 줄입니다"

2. 3. ICON 이미지 병합->스프라이트 이미지/css 스크립트

4. 이미지 로딩 지연

5. 데이터 비동기 로딩

6. 모바일 측면에서는 우리나라도 간단한 홍보 페이지를 만들고 있으며, CSS와 JS를 인라인으로 작성

위 내용은 Javascript의 이미지 지연 로딩에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!