图片加载不及时的问题

来源:10-17 通用指令:实现图片懒加载

CoderVi

2023-04-02

老师,img.src设为空会导致出现裂开的图片那个小图标,位置在item的左上角,如果下拉速度很缓慢是可以看到的,感觉不是很美观还会给人一种误以为图片加载失败的感觉,有什么方法能让那个小图标消失吗?而且按理说不应该存在这种能看到占位图的情况,但事实上老师的演示网页效果在缓慢下拉的时候也会出现,占位图露出最上部分,图片没有被加载的问题,这是useIntersectionObserver本身的问题吗?因为在vueuse文档的useIntersectionObserver演示里,也是元素最顶上露出一部分的时候isIntersecting的值仍为false,要再下拉一些才会变为true。http://img.mukewang.com/szimg/642985b7096021d025600372.jpg
截全屏慕课网说图片超出大小了,只能截底部。这下面三张图片就会出现这种情况,当滚到条停留在这种位置时就会出现,很不美观。

写回答

1回答

Sunday

2023-04-03

你好

这个可以给 src 一个本地的图片地址,或者是统一使用一个网络图片地址,等到图片加载完成之后,再进行 src 替换。这样 就不会出现 src 裂图的问题了。

0
0

基于 Vue3 ,打造前台+中台通用开发提效解决方案

42 种前台常见业务模型, 15 种中台通用组件,成为前端提效高手

788 学习 · 517 问题

查看课程