87,843
社区成员
发帖
与我相关
我的任务
分享请问如何让图片在1s后被替代
在图片显示之前是显示占位符，想让图片圆滑的出现，该怎么实现呢，我试过了jquery的fadeIn，没变化啊，还有其它办法么？
...全文
请发表友善的回复…
发表回复
Cee 2015-08-19
- 打赏
- 举报
您的代码真的让我受益良多！！！谢谢版主！！！
豪情 2015-08-19
- 打赏
- 举报
关键还是这段，判断图片的预加载完成。
var img = new Image();
img.src = placeholder.data('src');
placeholder.hide();
img.onload = function(){
placeholder[0].src = img.src;
placeholder.fadeIn();
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.10.2/jquery-1.10.2.js"></script>
<style type="text/css">
*{ margin:0; padding:0; }
body{ font:12px/1.125 Arial, Helvetica, sans-serif; background:#fff; }
a{ color:#0a8cd2; text-decoration:none; }
a:hover{ text-decoration:underline; }
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
.clearfix{ display:block; }
.clear{ clear:both; height:0; font:0/0 Arial; visibility:hidden; }
.none{ display:none }
</style>
</head>
<body>
<img src="http://avatar.csdn.net/0/F/3/2_jikeytang.jpg" data-src="http://avatar.csdn.net/8/3/7/1_gh2126002.jpg" id="placeholder" alt=""/>
<script>
var placeholder = $('#placeholder');
setTimeout(function(){
var img = new Image();
img.src = placeholder.data('src');
placeholder.hide();
img.onload = function(){
placeholder[0].src = img.src;
placeholder.fadeIn();
}
},2000)
</script>
</body>
</html>
