js实现图片预加载-百分百源码网

js实现图片预加载

发布时间：09/01 来源：未知浏览：关键词：

什么是预加载：

当页面翻开图片提早加载，并且缓存在会员当地，需要用到时直接停止渲染；在阅读图片较多的网页（baidu图库，淘宝京东等），可以有更好的会员体验；

一张图片的预加载

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事件的回调函数，才能打印出图片的宽度；

加载多张图片时，要提早在当地停止缓存，下面要讲三种预加载多张图片的例子：

第一种：load预加载

加载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、给这个图片增添事件侦听load；

3、加载完成后,将加载进来的图片复制一个新的,放在数组中；

4、修改num；假如num的值大于100休止施行，并且打印数组；

5、给这个图片的地址给予一个新地址,由于改动图片的地址就会从新触发load，所以会连续进入loadHandler函数,不竭加载,直到加载完成。

第二种：生成器函数实现预加载

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();
    });
  }

以上代码表示：

1、施行生成器函数并且一次施行loadImage 函数；

2、在Promise中创立图片；

3、推断图片可否可以加载，加载成功施行Promise的回调函数resolve；

4、施行一次resume函数，并在函数里面施行Promise在resolved状态下的函数

5、重复施行s.next().value，直到全部图片加载完成；

第三种：async/await预加载图片

function loadImage(src){
    let p=new Promise(function(resolve,reject){
      let img=new Image();
      img.onload=function(){//加载时施行resolve函数
        resolve(img);
      }
      img.onerror=function(){
        reject(src);
      }
      img.src=src;
    })
    return p;
  }
  async function fn(){
    let arr=[];
    for(let i=3;i<80;i++){
      await loadImage(`./img/${i}-.jpg`).then(img=>{
        arr.push(img);
      });
    }
    return arr;
  }
  fn().then(list=>{
    console.log(list);//打印图片数组
  })

这种办法是ES6的办法用到了async和await将异步转换为堵塞式同步；

说明：

1、fn 这个函数使用async 表示这个函数是一个异步函数

2、这个函数中就可以使用await ，await作用就是让异步变为同步等候，异步变成了堵塞式等候

3、当异步全部完成时，再连续向后运转

4、async函数中的await后面只能跟的时Promise对象

5、async函数施行后返回的是一个Promise对象

引荐教程：js入门教程

以上就是js实现图片预加载的具体内容，更多请关注百分百源码网其它相关文章！

打赏