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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
javascript之更有效率的字符串替换
Aug 02 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
利用浮层使select不可选的实现方法
Dec 03 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js判断选择的时间是否大于今天的代码
2013/08/20 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
2016/10/20 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
VUE 实现element upload上传图片到阿里云
2020/08/12 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python小白切忌乱用表达式
2020/05/29 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
开办饭店创业计划书
2013/12/28 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
公司新年寄语
2014/04/04 职场文书
大学生求职计划书
2014/04/30 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
教师培训学习心得体会
2016/01/21 职场文书
Django中session进行权限管理的使用
2021/07/09 Python