javascript - js在读取大图片的过程中，怎么先显示另一张图片？

Question

问题描述：现在正在做一个视频的预览功能，上传一个视频到服务器后，服务器会先调用第三方工具进行解析，然后得到一张该视频中某个帧的截图（该截图很小，不用考虑加载这个图片的时间）；现在用户上传了一个视频，我需要在页面中显示这个截图，但是服务器还在解析视频，所以我得不到这个截图，这时候，界面上会显示一个破损的图片，体验很差，我希望它能够先显示一个图片（一个已经准备好的体积很小的图片），直到服务器解析完成得到该截图后再显示截图内容；

已经尝试的方法：编程语言是Java，用它的timer先设置该位置的图片为已有的图片，在一段时间后比如10s后，再从服务器中去加载视频的截图，这个时候有一个问题，我确实能得到服务器解析后的图片，但是js已经把原来的图片给显示了出来，我得到了新的url，但是没有办法刷新页面来使得图片得到更新，系统的前端是用Google的gwt写的，改起来很吃力；希望能用图片标签的某个属性来完成；

寻求帮助，谢谢各位的解答！

Answer 1

这个就是一种写法，你把img的src改成你想请求的那个小图片。然后你给img的上面加一个src。这个地址就是你真正的地址。你给window.load事件上。用延时器settimeout做一个10秒后吧src放入src中。
当然。也有一些图片懒加载的插件。感兴趣可以上网查

Answer 2

把已经准备好的图片（相当于是图标）先放到src里面加载，然后把需要等待服务器解析后的截图放到Onload里面，原本以为这样它在加载onload的资源时也会出现破损图片，刚才试了一下，它会在把该资源加载完成后再去替代src里显示的图片，这样就能解决这个问题了，这个地方用了gwt的库，代码被封装了，用计时器改起来比较麻烦