Javascript.RU

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

Добавление изображения в цикле вешает браузер
Есть такой код для зума изображений (велосипед jquery zoom):

function Zoom(imgclass) {
	var images = getElementsByClassName(imgclass);
	for ( var i = 0; i < images.length; i++ ) {
		var tip = document.createElement('DIV');
		tip.style.cssText = 'overflow: hidden; display: none; width: 50px; height: 50px; border: 1px solid #EEEEEE; position: absolute; background: #FFFFFF;';
		images[i].offset = getOffset(images[i]);
		tip.appendChild(images[i].cloneNode(true)); // Вешает браузер!
		images[i].parentNode.insertBefore(tip, images[i].nextSibling);
		addEvent(images[i], 'mouseover', function () {
			// this.nextSibling.innerHTML = '<img src="' + this.src + '" width="' + (this.offsetWidth * 2) + '" height="' + (this.offsetHeight * 2) + '" />';
			this.nextSibling.style.display = 'block';
		});
		addEvent(images[i], 'mouseout', function () {
			this.nextSibling.style.display = 'none';
		});
		addEvent(images[i], 'mousemove', function (event) {
			var tip = this.nextSibling, img = tip.firstChild;
			tip.style.top = event.pageY + 10;
			tip.style.left = event.pageX + 10;
			img.style.marginTop = -event.pageY * 2 + this.offset.top * 2 + 25;
			img.style.marginLeft = -event.pageX * 2 + this.offset.left * 2 + 25;
		});	
	}
}


Проблема: при добавлении изображения в цикле (строка 7) браузер подвисает, скрипт не работает, консоль молчит. Если добавлять изображение при каждом mouseover (строка 10), то работает, но я хочу сделать по-человечески.
Так же, пробовал через innerHTML, не работает.
В чём дело?
Ответить с цитированием
  #2 (permalink)  
Старый 29.09.2010, 13:25
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

надо страничку, чтобы попробовать, так по коду не понятно
Ответить с цитированием
  #3 (permalink)  
Старый 29.09.2010, 13:54
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

http://qlib.ucoz.ru/zoom.htm

UPD: только что попробовал поставить алерт после вызова Zoom() — его нет => браузер подвисает из-за бесконечного цикла. Как я понял, это из-за того, что images.length меняется из-за того, что я добавляю изображения динамически. Кэширование images.length помогло избавиться от бесконечного цикла, но эта строка всё равно не работает:

tip.innerHTML = '<img src="' + images[i].src + '" width="' + (images[i].offsetWidth * 2) + '" height="' + (images[i].offsetHeight * 2) + '" />';


(если добавлять через .appendChild(), то то же самое)

Консоль молчит.

Последний раз редактировалось exec, 29.09.2010 в 14:06.
Ответить с цитированием
  #4 (permalink)  
Старый 29.09.2010, 15:41
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Странно, пример по ссылке вроде работает, никаких ошибок и подвисаний не заметил
Ответить с цитированием
  #5 (permalink)  
Старый 29.09.2010, 16:14
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Цитата:
пример по ссылке вроде работает
Я случайно выложил вариант с добавлением по mouseover, он рабочий.

Проблема уже решена.
Ответить с цитированием
Ответ



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

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