VUE从异步请求过来的数据动态加载图片会显示比较慢,如何解决呢

我的代码如下
图片描述

foodselected是异步请求过来的数据
循环的时候 文字马上就能显示,但图片得过会儿才显示,而且图片也不大(十几k),这种情况有可能是哪些原因引起的呢

回答:

应该就是简单的网络响应导致的,可以考虑在后端把这个图片转换成base64的url,在数据请求响应中直接传过来。另外,图片响应设置缓存、maxage,可以在后续显示的时候加快显示速度。

回答:

请使用排除法
1、直接访问图片,确保不是图片地址慢
2、既然是异步,比文字慢就是正常的啊,如果慢的太多,可以看看是在哪里进行加载的

回答:

可以用图片懒加载来缓解图片加载慢的尴尬,
可以参考:项目中的图片懒加载

回答:

异步请求的数据,渲染图片时,建议做以下优化,以提高用户体验:

  1. 设置CSS提前占位,防止reflow及页面闪动

  2. 增加default.png,loaded image 前的默认图片

  3. 动态生成image,并绑定onload事件,图片加载完完成背景图赋值。

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注