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 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
用JavaScript编写COM组件的步骤
Mar 17 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
jquery随机展示头像代码
Dec 21 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
详解vue 计算属性与方法跟侦听器区别(面试考点)
Apr 23 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
抖音短视频(douyin)去水印工具的实现代码
Mar 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
php字符串分割函数explode的实例代码
2013/02/07 PHP
php修改NetBeans默认字体的大小
2013/07/02 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
jquery根据锚点offset值实现动画切换
2014/09/11 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
微信小程序开发常见问题及解决方案
2019/07/11 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
python使用rsa加密算法模块模拟新浪微博登录
2014/01/22 Python
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
python中set常用操作汇总
2016/06/30 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
使用Python将图片转正方形的两种方法实例代码详解
2020/04/29 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
大学自我鉴定
2013/12/20 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
社区重阳节活动总结
2015/03/24 职场文书
机关单位保密工作责任书
2015/05/11 职场文书
2016年元旦寄语
2015/08/17 职场文书
团组织关系介绍信
2019/06/24 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS