点击goods的商品进入food详情页时，图片加载有延迟
来源：9-3 部署到云服务器
qq_慕运维8106661
2020-01-09
老师，我发现一个问题。
现象是这样的：
在首次加载完成时，点击goods的一个商品A进入详情页时，食物图片加载会有一段时间的空白，然后才出现 图片A。然后我点击商品B进入详情页时，会先显示A的图片，之后才变成B的图片。点击商品C进入详情页，会先显示B的图片，之后才变成C的图片。
我猜测可能是网速不行，换到网速快的地方，图片A变化到图片B的时间变短了，但还是有这样的现象。
我的问题：
请问这是为什么？要怎么解决？
写回答
1回答
-
ustbhuangyi
2020-01-09
因为图片的加载是异步的，而组件是共享的，展开弹层的过程也是同步的，所以虽然你把图片切到新的 url，但是由于新的图片加载需要时间，所以会先显示旧图片，再变成新图片。
解决方案可以预加载图片，比如展开弹层时加载好图片后再展开，但这样展开弹层会比较迟钝。还有一种方案是用图片懒加载的技术，先显示一张 loading 图，同时创建 Image 去加载图片，等图片加载成功后再把显示的 loading 图替换为新图片。00
相似问题