图片加载问题

来源:1-8 编辑器图片上传功能

_zion_

2021-02-20 19:10:34

老师,上传的图片加载不全,要刷新一下才能显示完整的图片,有什么解决思路吗?

​编辑器我写了一个富文本编辑器

尝试过的思路:

  • 我试过在 load 事件回调中把 <img> 添加到页面中,没有什么用。

  • 还有监听 complete 属性为 true 也没用

  • IntersectionObserver,没解决问题

  • 把 <img> 添加到页面后强制刷新,可以解决问题,这个解决方法不太好


http://img.mukewang.com/climg/6030e90d09bb579109690551.jpg

下载图片的时候发现一个现象:图片资源本身的体积就小于正常体积,前端就算把图片下载完了图片也展示不全,不知道为什么

http://img.mukewang.com/climg/6030e52509f0fe3c09520245.jpg


http://img.mukewang.com/climg/6030e575096fd87409480219.jpg

写回答

1回答

Brian

2021-02-20

你先用chrome的调试工具,调试一下图片,然后在调试窗口里面看看是不是样式的问题。


如果不是,是否换过图片尝试过。


从你上面的描述来看,应该不是后台接口的问题。

0
hzion_
hp>原本我把 添加img元素的逻辑 放在请求图片地址接口的 then 回调中。


之后我把 这段逻辑 放在了then回调外面,再用setTimeout把这段逻辑放在下次宏任务中,问题就解决了。


原因: 我猜测可能是本次事件循环中微任务队列中的任务太多了导致加载大一些的图片有问题?因为用一个很小的 vue demo 来加载图片,一点问题没有,反而这个复杂一点的项目加载图片就有问题。。。


我的代码:

http://img.mukewang.com/climg/603cffe4091259f106650307.jpg


http://img.mukewang.com/climg/603d0020092ab46508590409.jpg


h021-03-01
共5条回复

0 学习 · 1842 问题

查看课程