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

问题描述

问 题

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

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

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

解决方案

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

这篇关于javascript - js在读取大图片的过程中，怎么先显示另一张图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！