小东博客
img的lowsrc及图片预载思考 .
2014-10-9 小东


img的lowsrc是指当网速比较慢时,先加载一个小的图片,等大图加载完了再显示大图。



虽然现有的网速已经很快了,但是lowsrc的思想在提高用户体验上还是有很大好处,尤其是图片比较大的时候。



当然img的lowsrc没有出现在Web标准里面,那么如何去模拟呢?



主要有两种形式:



一、给img一个背景色或背景图片,这样也能达到类似的效果,虽然不是最理想的;



二、使用JS,实现上应该还是是比较容易的,以下是我的一种写法(当然不同的需求有不同的写法):



<script type="text/javascript">  
function load_img(url,url_s,o) {
var img = new Image();
img.src = url;
o.src=url_s;
if (img.complete) {
o.src=img.src;
return;
}
img.onload = function () {
o.src=img.src;
};
};
</script>
<input type="button" value="开始加载" onclick="load_img('http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_02.jpg','http://blog.xhlv.com/wp-content/uploads/2008/09/20080927_01.jpg',document.getElementById('img'))" />
<div><img src="" width="500" height="321" id="img"/></div>

评论:
on
2015-02-14 17:58 回复
on
发表评论:
昵称

邮件地址 (选填)

个人主页 (选填)

内容