Форум

kotmatroskin · #1 (**permalink**) 26.01.2009, 11:11

Суть такова.
Есть 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, но он просто не происходит.
Может у кого то есть опыт реализации этой самой задержки отображения другим методом?

Kolyaj · #2 (**permalink**) 26.01.2009, 11:59

У изображений есть событие onload.

kotmatroskin · #3 (**permalink**) 26.01.2009, 12:42

А разве не только для 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;
  });
});

Kolyaj · #4 (**permalink**) 26.01.2009, 14:13

Событие onload есть не только у окна, а также у изображений.

Gennady · #5 (**permalink**) 28.01.2009, 12:36

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;
  });
});

Форум

Справочник

Discord чат

Курсы javascript