Javascript

vue图片加载慢怎么处理,3分钟帮你解决~

本文主要是介绍vue图片加载慢怎么处理,3分钟帮你解决~,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

背景:
设计师大赛,设计师上传图片限制小于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' : '')" 
:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="item.pic + (check_support_webp ? '.w0-h332-q100.webp' : '')" alt="">
这篇关于vue图片加载慢怎么处理,3分钟帮你解决~的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!