杰网资源 Design By www.escxy.com

预加载基本概念:当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染;在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验;

一张图片的预加载

var img=new Image();
    img.addEventListener("load",loadHandler);
    img.src="/UploadFiles/2021-04-02/1.jpg">

上面代码中,图片还没加载完成打印图片的宽度时,图片宽度为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="/UploadFiles/2021-04-02/">

上面代码表示:

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,图片,预加载

杰网资源 Design By www.escxy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
杰网资源 Design By www.escxy.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?