Есть такой код для зума изображений (велосипед 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, не работает.
В чём дело?