이미지 사전 로딩을 구현하는 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를 사용하여 이 함수가 비동기 함수임을 나타냅니다

2. 이 함수에서 Wait를 사용할 수 있습니다. Wait의 기능은 비동기를 동기 대기로, 비동기를 차단 대기로 바꾸는 것입니다. .모든 비동기가 완료되면 계속해서 뒤로 실행됩니다

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

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

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

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