网页加载大图片往往需要等待很长时间加载完毕,这对于用户体验来说是一件十分不好的事情。目前主流方法是使用预读取,先读取一张粗略图(比较模糊的,体积也比较小)等大图加载完毕后,再替换回来。如果图片失效的话可以则加载无法显示的提示。具体代码如下(最精简的方法):

1
2
3
4
5
6
<img src="原始图片点知"  onerror='src="粗略图地址"';
style="display:none"
onload= 'load.style.display="none";this.style.display="";'/>
<div id="load"> <img src=/images/wait.gif" />

</div>