Ожидание загрузки изображения
Суть такова.
Есть 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, но он просто не происходит. Может у кого то есть опыт реализации этой самой задержки отображения другим методом? |
У изображений есть событие onload.
|
А разве не только для window.onload() это подходит?
И потом, вроде как событие onload() происходит единожды. Разве нет? Оказалось, что приведенный JS-код не работает в IE и Chrome, поэтому я его немного изменил. Но вопрос о показе предзагрузки остаётся актуальным. Новый код: $(document).ready(function(){ $("img.pic").click(function() { var cur_img = this.id; $("#pic_m").fadeOut(500); window.setTimeout(function() { document.getElementById("pic_m").innerHTML = "<img src=\"img_b\/" + cur_img + ".bmp\">"; }, 500); $("#pic_m").fadeIn(500); return false; }); }); |
Событие onload есть не только у окна, а также у изображений.
|
HTML-код немножко изменил:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="js/jquery-1.2.6.js" type="text/javascript"></script> </head> <body> <div id="pic_m"> <img src="img/b1.jpg" border="0"> </div> <a href="img/b1.jpg"><img class="pic" id="b1" src="img/m1.png" border="0"></a> <a href="img/b2.jpg"><img class="pic" id="b2" src="img/m2.png" border="0"></a> <a href="img/b3.jpg"><img class="pic" id="b2" src="img/m3.png" border="0"></a> </body> </html> А JS-код так: $(document).ready(function(){ $("img.pic").click(function(){ var path = $(this).parent().attr("href"); $("#pic_m").animate({opacity: 0},1000,function(){ $(this).html("<img src=" + path + " />").find("img").bind("load",function(){ $(this).parent().animate({opacity: 1},1000); }); }); return false; }); }); |
Часовой пояс GMT +3, время: 11:43. |