Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.01.2009, 11:11
Новичок на форуме
Отправить личное сообщение для kotmatroskin Посмотреть профиль Найти все сообщения от kotmatroskin
 
Регистрация: 16.01.2009
Сообщений: 6

Ожидание загрузки изображения
Суть такова.
Есть 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, но он просто не происходит.
Может у кого то есть опыт реализации этой самой задержки отображения другим методом?
Ответить с цитированием
  #2 (permalink)  
Старый 26.01.2009, 11:59
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

У изображений есть событие onload.
Ответить с цитированием
  #3 (permalink)  
Старый 26.01.2009, 12:42
Новичок на форуме
Отправить личное сообщение для kotmatroskin Посмотреть профиль Найти все сообщения от kotmatroskin
 
Регистрация: 16.01.2009
Сообщений: 6

А разве не только для 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;
  });
});
Ответить с цитированием
  #4 (permalink)  
Старый 26.01.2009, 14:13
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Событие onload есть не только у окна, а также у изображений.
Ответить с цитированием
  #5 (permalink)  
Старый 28.01.2009, 12:36
Аватар для Gennady
Новичок на форуме
Отправить личное сообщение для Gennady Посмотреть профиль Найти все сообщения от Gennady
 
Регистрация: 26.01.2009
Сообщений: 8

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;
  });
});
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как выдавать ошибку при сбросе загрузки страницы? AvaGet Общие вопросы Javascript 2 11.12.2008 19:04
Как сделать, что бы изображения пропадали. Dronch Элементы интерфейса 7 28.08.2008 21:55
Выполнить код после загрузки изображения EugenyK Events/DOM/Window 2 15.07.2008 10:09
как при добавлении изображения на сервер считывать имя в БД? solomusic Серверные языки и технологии 3 12.06.2008 23:28
Визуальное выделение части изображения Гость Общие вопросы Javascript 0 25.02.2008 19:44