이미지 사전 로딩을 구현하는 js

미리 로드되는 내용:

페이지가 열리면 이미지가 미리 로드되어 로컬에 캐시되며, 이미지가 많은 웹페이지(Baidu Gallery, Taobao Jingdong 등)를 탐색할 때 필요할 때 직접 렌더링됩니다. , 더 나은 사용자 경험을 가질 수 있습니다.

이미지 미리 로드

var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width)； function loadHandler(e){ console.log(img.width);//当前图片的原始宽度 }

위 코드에서 이미지가 로드되지 않고 인쇄된 이미지의 너비가 인쇄되면 이미지 너비는 이미지가 로드된 후에만 0입니다. 렌더링을 위해 DOM 트리에 기록되며, 로드 이벤트의 콜백 함수를 트리거한 후에만 이미지 너비를 인쇄할 수 있습니다.

여러 이미지를 로드할 때 사전에 로컬로 캐시해야 합니다. 이미지:

첫 번째:load preload

사진 100개를 로드하고 사진 이름은 1.jpg~100.jpg입니다(아래 동일).

var num=1; var list=[]; loadImage(); function loadImage(){ var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/"+num+".jpg"; } function loadHandler(e){ list.push(this.cloneNode());//复制当前图片元素 num++; if(num>100){console.log(list);return;} this.src="./img/"+num+".jpg"; //修改地址继续后触发load事件 }

위 코드의 의미는 다음과 같습니다.

1.

2. 이미지에 대한 추가 이벤트 리스너 로드를 제공합니다.

3. 로드된 이미지를 새 이미지에 복사하고

4. num이 100보다 크면 실행을 중지하고 배열을 인쇄합니다.

5. 이미지의 주소를 변경하면 로드가 다시 시작되므로 계속해서 loadHandler 함수를 입력합니다. 로딩이 완료될 때까지 계속 로딩하세요.

두 번째 유형: 생성기 함수는 사전 로드를 구현합니다.

1. 생성기 함수를 실행하고

2.Promise에서 이미지를 생성합니다. image 로드 가능 여부, 로드는 Promise의 콜백 함수

4를 성공적으로 실행합니다. 다시 시작 함수를 한 번 실행하고

함수에서 Promise의 함수를 반복적으로 실행합니다. ().value는 이미지가 로드될 때까지입니다.

세 번째 방법: async/await는 이미지를 미리 로드합니다.

function loadImage(src){ return new Promise(function(resolve,reject){ let img=new Image(); img.onload=function(){ resolve(img);//加载时执行resolve函数 } img.onerror=function(){ reject(src+'这个地址错误');//抛出异常时执行reject函数 } img.src=src; }) } function* fn(){ for(let i=1;i<100;i++){ yield loadImage("./img/"+i+".jpg"); } } let s=fn(); let value=s.next().value; resume(); function resume(){ value.then(img=>{ console.log(img);//打印加载的图片标签 value=s.next().value; if(value)resume(); }); }

이 방법은 async 및 wait를 사용하여 비동기를 차단 동기화로 변환하는 ES6 방법입니다. 1, fn 이 함수 async를 사용하여 이 함수가 비동기 함수임을 나타냅니다

4. 비동기 함수의 wait 뒤에는 Promise 객체만 올 수 있습니다

5. 비동기 함수가 실행된 후에는 Promise 객체가 반환됩니다

추천합니다. 튜토리얼:
js 소개 튜토리얼

위 내용은 이미지 사전 로딩을 구현하는 js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!