上一篇: 简述JS中执行环境与作用域的关系下一篇:小程序项目-总结

「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue）

发布时间：2019-08-10 发布网站：脚本宝典

脚本宝典收集整理的这篇文章主要介绍了「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_777_0@

基于promise的图片资源一次性加载或者预加载

作者：NEXT卓

场景描述

不是每个网页端的用户都能用得起光纤，不是每张图片都是压缩得很小，有时候我们也想要看高清大图，但是受限于网速有时候场景是这样的：（很明显左边的第一张图片还没出来，其他的就出来了）

「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue）

图片资源预加载是一个很常见的需求，在网页开发中，

譬如我们在开发一个基于canvas的游戏，涉及到图片资源的时候，为了游戏的体验，我们希望图片资源全部加载才开始游戏。
又譬如在一个多图展示的网页，由于图片过多或图片太大，我们希望图片加载完再一次性显示，而不是东一张西一张陆续显示，这时候也需要用图片一次性加载功能。

图片资源加载的原理

在浏览器向服务器发送请求的过程中，如果图片资源已经加载过一次了，则不会再从服务器加载同一个图片，
利用这个原理，我们的实现思路如下：

@H_360_37@// 创建一个图片对象
let img = new Image()
img.src = '图片地址'
// 资源图片加载完毕
img.onload = function() {}

基于这个原理我封装了一个图片资源加载的函数，其结构如下

/**
 * @description 图片资源加载函数
 * 适用于canvas加载图片，返回的是一个promise异步对象，response 的值为一个资源对象
 * @param {Object} config 参数设置,是一个对象
 * config.sourceData - 资源对象 {key: value}   资源名：资源地址
 * config.mode - 默认为false, 即使有失败也会返回, mode为true，开启严格模式，一个失败则全部不返回
 * config.target - 要预加载的目标节点对象
 * config.response - 默认false, 是否返回promise异步对象，true为返回
 * @return {null || Promise}
 */
const loadImg = (config) => {
    // 初始化设置参数
    let sourceData = config.sourceData
    let mode = config.mode || false
    let target = config.target || []
    let needRes = config.response || false
    // 创建promise对象
    let promise = new Promise((resolve, reject) => {
        // 函数内部
        // 完整代码在最底层
     })
 }

下面让我们先来看看这个函数的威力吧！

图片加载函数描述与使用展示

函数loadImg()用于图片加载（函数实现代码在最下面），接受的参数为一个设置对象config, 该对象有4个参数键值

config.sourceData：必选参数，资源对象 {key: value} 资源名：资源地址
config.target：可选参数，要实现加载的目标节点集
config.response：可选参数，默认false,不返回异步对象；设置为true,则返回，可通过then()进行下一步数据操作
config.mode：可选参数，是否开启严格模式
- 值为false(默认值): 不开启严格模式，该模式下如果有部分图片加载失败，其余图片仍然显示
- 值为true: 开启严格模式，该模式下如果有部分图片加载失败，所有图片都不显示，如果需要返回结果，则返回结果是抛出一个错误

基本调用方式如下

// 图片资源对象， 对象的key值是自定义的
// 到时候如果有返回，返回的response对象的key值跟这个一样
let data = {
    img1: 'http://plaechold.it/200x200',
    img2: 'http://plaechold.it/200x200',
    img3: 'http://plaechold.it/200x200'
}
// 需要预加载的节点集合
let images = document.querySelectorAll('img')
// 开启资源加载
loadImg({
    sourceData: data,  // 图片资源对象
    target: images,  // 预加载目标
    mode: true,  // 是否开启严格模式
    response: false  // 是否返回异步对象
})

「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue）

应用实例

canvas中加载全部图片再绘制到canvas面板中

记住必须设置config.response 的值为 true 才能用then进行数据操作

let canvas = document.querySelector('canvas')
let context = canvas.getContext('2d')
// 图片资源对象
let data = {
    bird: 'http://plaechold.it/200x200',  // 一只鸟的图片
    person: 'http://plaechold.it/200x200',  // 一个人类的图片
    tiger: 'http://plaechold.it/200x200'  // 一只老虎的图片
}
// 资源加载
loadImg({
    sourceData: data,  // 图片资源对象
    mode: true,  // 是否开启严格模式
    response: true  // 返回异步对象,然后可以使用then获取结果进行下一步处理
})
.then(res => {
    // res 也是一个对象{ bird: 图片对象， person: 图片对象， tiger: 图片对象 }
    // 获取所有的图片对象
    let images = Object.values(res)
    images.forEach((value, index) => {
        context.drawImage(value, index * 100, index * 100)
    })
})
// 记住必须设置config.response 的值为 true 才能用then进行数据操作

htML页加载完毕一次性展示全部图片实例

<!--在html中图片的src请别写上，也别写src=""，因为空地址也浏览器也会去请求 -->
<img  alt="1">
<img  alt="2">
<img  alt="3">

// 图片资源对象
let data = {
    bird: 'http://plaechold.it/200x200',  // 一只鸟的图片
    person: 'http://plaechold.it/200x200',  // 一个人类的图片
    tiger: 'http://plaechold.it/200x200'  // 一只老虎的图片
}
let images = document.querySelectorAll('img')
// 资源加载
loadImg({
    sourceData: data,  // 图片资源对象
    target: images,  // 要渲染的节点集
    mode: true,  // 是否开启严格模式
})

loadImg()如何在vue中优雅地实现图片加载

在vue中，由于vue是双向数据绑定，因此我们可以先这样：
假设我要加载的图片html代码如下

<img :src = "imgSrc.img1">
<img :src = "imgSrc.img2">
<img :src = "imgSrc.img3">

也就是说图片的地址是动态的，绑定着imgSrc
整个实现代码如下：

<template>
<div class="img-wrap">
<img :src = "imgSrc.img1">
<img :src = "imgSrc.img2">
<img :src = "imgSrc.img3">
</div>
</template>
<script >
export default {
    data() {
    return {
        // 图片绑定的数据
        imgSrc: {
            img1: '',
            img2: '',
            img3: ''
        },
        // 要加载的图片地址
        loadSrc: {
             img1: 'http://placehold.it/100x100',
             img2: 'http://placehold.it/200x200',
             img3: 'http://placehold.it/300x300'
          }
        }
    },
    created() {
        loadImg({
        sourceData: this.loadSrc,
        response: true // 开启返回response
        })
        .then(() => {
            // 将加载好的图片地址赋值给imgSrc
            this.imgSrc = Object.assign({}, this.loadSrc)
        })
    }
}
</script>

总结

基于这个函数的功能，我们可以做很多事情，除了上面的canvas绘图和展示图片外，还可以利用该
函数进行预加载，譬如当用户在浏览第一页的时候，我们可以先加载第二页的图片，具体的实现例子
这里就不多做展示了。简单的如下

 let nextImages  = document.querySelectorAll('.next-img') // 下一页的图片节点
// 用户只移动到按钮上面还没点击
button.hover = function() {
  // 预加载图片资源
  loadImg({
      sourceData: data,  // 图片资源对象
      target: nextImages,  // 要渲染的节点集
      mode: true,  // 是否开启严格模式
  })
  }
  // 这样当用户click点击以后图片资源已经在hover的时候就加载了

完整的函数实现代码如下

进度 let loadNum = 0 // 资源加载的结果集 let response = {} // 如果是非严格模式 if (mode === false) { // 遍历加载每个资源 Object.keys(sourceData).forEach(key => { let source = new Image() // 失败或者成功都写入response source.onload = source.onerror = () => { response[key] = source loadNum++ if (loadNum === Object.keys(sourceData).length) { // 如果有目标对象 if (target) { target.forEach((item, index) => { item.src = Object.values(sourceData)[index] }) } // 成功 resolve(response) } } // src的赋值放在onload和onerror事件后面，这样才能兼容IE source.src = sourceData[key] }) } else if (mode === true) { // 严格模式：一个失败直接结束且返回空对象 // 遍历加载每个资源 Object.keys(sourceData).forEach(key => { let source = new Image() // 成功则写入response source.onload = () => { response[key] = source loadNum++ if (loadNum === Object.keys(sourceData).length) { // 如果有目标对象 if (target) { target.forEach((item, index) => { item.src = Object.values(sourceData)[index] }) } resolve(response) } } // 失败则返回空 source.onerror = () => { // 失败 reject(new Error()) } // src的赋值必须放在最后，兼容IE source.src = sourceData[key] }) } }) // 结束 if (needRes) { return promise } }" title="" data-original-title="复制">

/**
 * @description 资源图片加载函数
 * 适用于canvas加载图片，返回的是一个promise异步对象，response 的值为一个资源对象
 * @param {Object} config 参数设置,是一个对象
 * config.sourceData - 资源对象 {key: value}   资源名：资源地址
 * config.mode - 默认为false, 即使有失败也会返回, mode为true，开启严格模式，一个失败则全部不返回
 * config.target - 要预加载的目标节点对象
 * config.response - 默认false, 是否返回promise异步对象，true为返回
 * @return {null || Promise}
 */
const loadImg = (config) => {
    // 初始化设置参数
    let sourceData = config.sourceData
    let mode = config.mode || false
    let target = config.target || []
    let needRes = config.response || false
    // 创建promise对象
    let promise = new Promise((resolve, reject) => {
        // 资源加载进度
        let loadNum = 0
        // 资源加载的结果集
        let response = {}
        // 如果是非严格模式
        if (mode === false) {
            // 遍历加载每个资源
            Object.keys(sourceData).forEach(key => {
                let source = new Image()
                // 失败或者成功都写入response
                source.onload = source.onerror = () => {
                    response[key] = source
                    loadNum++
                    if (loadNum === Object.keys(sourceData).length) {
                        // 如果有目标对象
                        if (target) {
                            target.forEach((item, index) => {
                                item.src = Object.values(sourceData)[index]
                            })
                        }
                        // 成功
                        resolve(response)
                    }
                }
               // src的赋值放在onload和onerror事件后面，这样才能兼容IE
                source.src = sourceData[key]
            })
        } else if (mode === true) {  // 严格模式：一个失败直接结束且返回空对象
            // 遍历加载每个资源
            Object.keys(sourceData).forEach(key => {
                let source = new Image()
                // 成功则写入response
                source.onload = () => {
                    response[key] = source
                    loadNum++
                    if (loadNum === Object.keys(sourceData).length) {
                        // 如果有目标对象
                        if (target) {
                            target.forEach((item, index) => {
                                item.src = Object.values(sourceData)[index]
                            })
                        }
                        resolve(response)
                    }
                }
                // 失败则返回空
                source.onerror = () => {
                    // 失败
                     reject(new Error())
                }
                // src的赋值必须放在最后，兼容IE
                source.src = sourceData[key]
            })
        }
    })
    // 结束
    if (needRes) {
        return promise
    }
}

脚本宝典总结

以上是脚本宝典为你收集整理的「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue）全部内容，希望文章能够帮你解决「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。

标签：assign button button Class const const const default default div do document else else es6 export export export false false for for function function function if image image images in in int java length let name name new new null null Object onerror onload post-format-gallery Promis Promise Promise return return return select static static static text text this top top true

上一篇: 简述JS中执行环境与作用域的关系下一篇:小程序项目-总结

猜你在找的ES2015(es6)相关文章

vuex 基本入门和使用（二） 2019-08-19
默认参数如何在JavaScript ES6中工作 2018-11-14
JavaScript ES6功能：好的部件 2018-11-14
如何使用ES6箭头函数使您的JavaScript更易于阅读 2018-11-14
如何使用ES6在JavaScript中有条件地构建对象 2018-11-14
关于如何使用Fetch API执行HTTP请求的实用ES6指南示例代码 2018-11-14
5个在ES6中修复的JavaScript“坏”的部分 2018-11-13
分享干货ECMAScript 2015（ES6）提示和技巧非常有用 2018-11-13
JavaScript ES6 - 写得少，做得更多 write less, do more 2018-11-13
什么时候（和为什么）你应该使用ES6箭头功能 - 何时不应该使用ES6箭头功能 2018-11-12

「前端早读君001」基于ES6的Promise封装的图片资源加载通用函数（适用于vue）

基于promise的图片资源一次性加载或者预加载

场景描述

图片资源加载的原理

图片加载函数描述与使用展示

应用实例

canvas中加载全部图片再绘制到canvas面板中

htML页加载完毕一次性展示全部图片实例

loadImg()如何在vue中优雅地实现图片加载

总结

脚本宝典总结