Vue中引入ES6 图片预加载

封装一个图片懒加载方法在imagesPreLoader.js里:

export const preLoadImg = source => {
    const pr = []
    const images = []
    source.forEach(url => {
        let p = loadImage(url)
            .then(img => images.push(img))
            .catch(err => console.log(err))
        pr.push(p)
    })
    return Promise.all(pr)
}

const loadImage = url => {
    return new Promise((resolve, reject) => {
        let img = new Image()
        img.onload = () => resolve(img)
        img.onerror = reject
        img.src = url
    })
}

在VUE中使用,在main.js里引用:

import { preLoadImg } from './utils/imagesPreLoader'
;(async () => {
    await preLoadImg([require('./assets/images/bg.jpg'), require('./assets/images/bg-rules.png'), require('./assets/images/bg-prize.png')])
    new Vue({
        el: '#app',
        components: { App },
        template: '<App/>'
    })
})()
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容