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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
js获取css的各种样式并且设置他们的方法
Aug 22 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
动态加载、移除js/css文件的示例代码
Mar 20 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Vue Element UI自定义描述列表组件
May 18 Vue.js
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版本号
2006/10/09 PHP
PHP 时间日期操作实战
2011/08/26 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
js自定义事件及事件交互原理概述(二)
2013/02/01 Javascript
jquery选择器之层级过滤选择器详解
2014/01/27 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
使用Ajax生成的Excel文件并下载的实例
2016/11/21 Javascript
树结构之JavaScript
2017/01/24 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
浅析python 内置字符串处理函数的使用方法
2014/06/11 Python
python进阶教程之循环对象
2014/08/30 Python
django Admin文档生成器使用详解
2019/07/22 Python
softmax及python实现过程解析
2019/09/30 Python
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
消防战士优秀事迹材料
2014/02/13 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
车辆年审委托书范本
2014/09/18 职场文书
新郎答谢词
2015/01/04 职场文书
写给医生的感谢信
2015/01/22 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
Rhit高效可视化Nginx日志查看工具
2021/11/01 Servers