Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2012, 00:45
Интересующийся
Отправить личное сообщение для asker Посмотреть профиль Найти все сообщения от asker
 
Регистрация: 03.09.2008
Сообщений: 13

как лучше сделать динамическое изменение изображений ?
На странице выводится одна большая картинка и пять миниатюр, нужно при клике на миниатюру менять главную картинку на соответствующую.

собственно на страницу приходит обьект json который содержит всю необходимую информацию, сейчас замена реализовано так.

$('.mini_image').bind('click', function(event){		
	event.preventDefault();
    //выбираем нужный обьект по id					
	var ins = data[$(this).attr('id')];
	 //обновляем главное изображение
	 $("#mainImage").attr("src", ins.images.view.url);	 
});


но главная картинка меняется с задержкой и вообще можно ли это сделать как то лучше ? плавнее, может с каким то эффектом на jQuery ?
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2012, 01:18
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

1. прокешировать. тогда картинка будет загружаться в разы быстрее
new Image().src="/image.jpg";

этого бывает достаточно.
но в вашем случае это сделать низя, т.к. адреса изображений неизвестны (да?)
2. вешать на картинку обработчик события завершения её загрузки, и там её уже показывать.
var ins ...
$("#mainImage").fadeOut().attr("src", ins.images.view.url).bind('load', function(){ $(this).fadeIn(); });
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2012, 22:16
Интересующийся
Отправить личное сообщение для asker Посмотреть профиль Найти все сообщения от asker
 
Регистрация: 03.09.2008
Сообщений: 13

Сообщение от melky Посмотреть сообщение
1. прокешировать. тогда картинка будет загружаться в разы быстрее
new Image().src="/image.jpg";

этого бывает достаточно.
но в вашем случае это сделать низя, т.к. адреса изображений неизвестны (да?)
2. вешать на картинку обработчик события завершения её загрузки, и там её уже показывать.
var ins ...
$("#mainImage").fadeOut().attr("src", ins.images.view.url).bind('load', function(){ $(this).fadeIn(); });
адреса изображений известны, по клику на миниатюру узнаем id картинки и по id выбираем нужный адрес. Немного переписал скрипт добавил анимации, посмотреть можно здесь http://dobro.simcity.crimea.ua/ но не могу понять изображение меняется быстрее чем срабатывает fadein() из-за этого возникает эффект что картинка грузится два раза, как это можно избежать ?
Ответить с цитированием
  #4 (permalink)  
Старый 23.01.2012, 03:36
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

читайте первый пункт. вам нужно поместить их в кеш.
или же при скрытии заменять заглушкой с такими же размерами, как у картинки.
Ответить с цитированием
  #5 (permalink)  
Старый 27.01.2012, 14:22
Аватар для inst
Аспирант
Отправить личное сообщение для inst Посмотреть профиль Найти все сообщения от inst
 
Регистрация: 12.01.2012
Сообщений: 44

Попробуй так:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<script src="http://yandex.st/jquery/1.7.1/jquery.js"></script>
<script>
$(document).ready(function() {
var img = document.getElementById('quickViewMainImage');
var inspirations = ['img/quickview_340/sneakers.jpg', 'img/quickview_340/sneakers1.jpg', 'img/quickview_340/sneakers2.jpg'];

$(img).on('load', function() {
	$(this).fadeIn(500);
});

$('.inspiration_image').on('click', function(e) {
	e.preventDefault();											
	var id = $(this).attr('id').substring(3);
	$(img).fadeOut(500, function() {
		img.src = inspirations[id];
	});
});
});
</script>
</head>
<body>

<img style="display: inline;" id="quickViewMainImage" src="img/quickview_340/sneakers.jpg" alt="" />

<a id="img0" class="inspiration_image" href="http://gmx.com/">						
    <img src="img/swatches/sneakers_002.jpg" alt="test" title="test" height="60" width="60">
</a>
<a id="img1" class="inspiration_image" href="http://gmx.com/">						
    <img src="img/swatches/sneakers1.jpg" alt="test" title="test">
</a>
<a id="img2" class="inspiration_image" href="http://gmx.com/">						
    <img src="img/swatches/sneakers2.jpg" alt="test" title="test">
</a>


</body></html>


Твоя проблема была в очереди исполнения. Ты подменял у картинки src и сразу её показывал, ещё до того, как картинка была полностью загружена, я по сути добавил обработчик onLoad.

PS: клёвые кеды
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как сделать fullscreen -=1100=- Общие вопросы Javascript 8 30.07.2012 09:53
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19
Как отлаживать события? Или как сделать трассировку вызовов функций? gennad Events/DOM/Window 1 18.08.2010 13:21
Как обработать изменение масштаба окна в IE8 ? v_k Events/DOM/Window 1 09.08.2010 13:35
Как сделать вкладку с 'плюсами и минусами'??? Monopolist Элементы интерфейса 2 05.08.2009 14:07