vue指令优化网络图片加载速度

背景：设计师大赛，设计师上传图片限制小于10M，这个时候作品大多为数M，展示作品列表每次加载原图会消耗大量带宽，图片完整加载非常耗时。所以需要优化加载速度

 

方案：1.如果是本地静态资源图片的话，可以用webpack打包工具压缩图片或者压缩图片（ https://tinypng.com/）网站进行压缩；

 

           2.如果是网络图片的话，则可以使用webp图片格式，图片体积至少缩小了40%以上，缺点是部分浏览器不兼容；

 

           3.也可以懒加载或者预加载，一般适用于瀑布流滚动的场景，不过我的场景是分页加载的，所以性价比较低。

 

难点：1.因为使用的是vue项目的框架，每次组件中复用起来单独写比较麻烦，所以封装成全局指令，方便使用；使用webp的过程中，发现有些webp格式图片不能正常加载，所以采取加载失败之后的兼容（即使用原图地址替换）

 

//判断是否支持webp格式图片 支持 返回true   不支持 返回false
function check_support_webp() {
    return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
  }
Vue.prototype.check_support_webp = check_support_webp()
//全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片
Vue.directive('real-img', async function (el, binding) {//指令名称为：real-img
    let imgURL = binding.value;//获取图片地址
    if (imgURL) {
        let exist = await imageIsExist(imgURL);
        if (exist) {
            el.setAttribute('src', imgURL);
        } else {
            el.setAttribute('src', imgURL.split('.w0-h332-q100.webp')[0]);
        }
    }
})


/**
* 检测图片是否存在
* @param url
*/
let imageIsExist = function(url) {
    return new Promise((resolve) => {
        var img = new Image();
        img.onload = function () {
            if (this.complete == true){
                resolve(true);
                img = null;
            }
        }
        img.onerror = function () {
            resolve(false);
            img = null;
        }
        img.src = url;
    })
}

使用方式：

<img v-real-img="item.pic + (check_support_webp ? '.w0-h332-q100.webp' : '')" 
:src="item.pic + (check_support_webp ? '.w0-h332-q100.webp' : '')" alt="">