Суть такова.
Есть JS-код:
$(document).ready(function(){
$("img.pic").click(function() {
var cur_img = this.id;
$("#pic_m").fadeOut(500);
window.setTimeout("$(\"#pic_m\").empty();", 500);
window.setTimeout(function() {
$("#pic_m").append("<img id=\"" + cur_img + "_view\" src=\"img_b/" + cur_img + ".bmp>");
}, 500);
$("#" + cur_img + "_view").load(function() { $("#pic_m").fadeIn(500); });
});
});
Есть HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="pic_m">
<img src="img_b/green.bmp" border="0">
</div>
<a href="#"><img class="pic" id="orange" src="img_s/2.bmp" border="0"></a>
<a href="#"><img class="pic" id="green" src="img_s/1.bmp" border="0"></a>
<a href="#"><img class="pic" id="red" src="img_s/3.bmp" border="0"></a>
</body></html>
Задача - при клике на одну из маленьких картинок (1, 2, 3), DIV с айди pic_m плавно исчезает, потом заменяется картинка, потом проявляется так же плавно. Необходимо на время ожидания загрузки картинки не показывать её, а только после окончательной прогрузки инициировать FadeIn. Пробую использовать load, но он просто не происходит.
Может у кого то есть опыт реализации этой самой задержки отображения другим методом?