JS图片预加载三种实现方法解析


Posted in Javascript onMay 08, 2020

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

一张图片的预加载

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对象

以上就是三种预加载的方法,仅供参考;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
js事件监听机制(事件捕获)总结
Aug 08 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
Dec 26 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
javascript实现简单的on事件绑定
Aug 23 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
JavaScript中CreateTextFile函数
Aug 30 Javascript
JavaScript ES6 Class类实现原理详解
May 08 #Javascript
JavaScript cookie原理及使用实例
May 08 #Javascript
JavaScript中的各种宽高属性的实现
May 08 #Javascript
element-ui 实现响应式导航栏的示例代码
May 08 #Javascript
JS控制下拉列表左右选择实例代码
May 08 #Javascript
VSCode搭建React Native环境
May 07 #Javascript
Javascript查看大图功能代码实现
May 07 #Javascript
You might like
资料注册后发信小技巧
2006/10/09 PHP
PHP下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP中list方法用法示例
2016/12/01 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
js Event对象的5种坐标
2011/09/12 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
node.js 利用流实现读写同步,边读边写的方法
2017/09/11 Javascript
JS二分查找算法详解
2017/11/01 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
原生js实现日期选择插件
2020/05/21 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
75条笑死人的知乎神回复,用60行代码就爬完了
2019/05/06 Python
python中比较两个列表的实例方法
2019/07/04 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
解释一下钝化(Swap out)
2016/12/26 面试题
新浪微博实习心得体会
2014/01/27 职场文书
作文评语集锦大全
2014/04/23 职场文书
活动总结怎么写
2014/04/28 职场文书
综合实践活动报告
2015/02/05 职场文书
辩护词格式
2015/05/22 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
如何使用JavaScript策略模式校验表单
2021/04/29 Javascript
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL