У меня проблемы с синхронизацией JavaScript.
К вашему сведению, страница представляет собой файл jsp, а к указанной странице прикреплен отдельный файл js и файл jQuery CDN.В целях устранения неполадок я удалил весь ненужный контент и код и вставил то, что мне было нужно, в отдельные файлы jsp и js для устранения этой конкретной проблемы.
Если бы я мог где-нибудь отобразить html и js, это было бы здорово.Но сейчас я опишу это.На странице есть две кнопки: одна для загрузки изображения и одна для переключения функции «масштабирования» (подробнее об этом позже).Пользователь нажимает кнопку, которая загружает изображение с использованием DOM, в частности innerHTML.Это изображение окружено горизонтальной и вертикальной полосами прокрутки.Когда пользователь включает функцию «масштабирования», изображение записывает положение щелчка мыши в событии щелчка.Таким образом, при этом пользователь нажимает на изображение, и снова загружается более крупная версия того же изображения, используя DOM и innerHTML.Самый последний шаг, самый важный, с использованием позиции мыши, полосы прокрутки будут фокусироваться и центрироваться на точке, по которой щелкнули (используя scrollLeft и scrollTop).
Все это работает безупречно в IE.Однако в браузерах не IE (например, FireFox) для настройки прокрутки требуется пара щелчков мыши, чтобы догнать внутренний HTML.То есть, когда пользователь «увеличивает» в первый раз, изображение загружается, но полосы прокрутки не корректируются.Требуется еще два последовательных клика, чтобы он работал так же, как в IE.Я исследовал innerHTML, и он медленнее в FireFox, чем IE.
Как я могу это исправить?Кто-нибудь еще пытался загрузить изображение в FireFox с помощью JavaScript и сразу же настроить положение прокрутки на изображении?Опять же, это работает первый и каждый раз после этого в IE.Но в браузерах, отличных от IE, возникают проблемы.
Я пытался использовать innerHTML, replaceChild, appendChild, пока что ничего из того, что я пробовал, не исправляет.
Спасибо.
Обновление: Я хотел посмотреть, не связана ли эта проблема с полосами прокрутки или просто с изображениями;Итак, я заменил изображение на
...
и запрограммировал его для прокрутки сразу после загрузки ** первого * изображения с помощью инициированного пользователем события onclick.Интересно, что это сработало.Затем я заменил текст на изображение, и оно снова было сломано.
Таким образом, после загрузки изображения с использованием DOM (то есть innerHTML) любые попытки программной прокрутки в браузерах, отличных от IE, потерпят неудачу.Однако, если вы программно прокрутите еще раз, он будет работать нормально.
Update2: Я попытался использовать методы, чтобы программно отменить событие в конце вызова и немедленно вызвать функцию снова,но это не решило проблему.
Затем я попытался загрузить изображение с помощью jquery, и это, похоже, сработало.Я адаптировал его из двух других статей, посвященных stackoverflow: Могу ли я получить изображение и загрузить через ajax в div и img onload не очень хорошо работает в IE7 (чтобы обойти проблему кэширования).
Вот код, который я использовал:
image = new Image();
image.src = "sample.gif?d=" + new Date(); // passing unique url to fix IE (see link above)
image.onload = function () {
$("#imgcontainer").empty().append(image);
// document.getElementById("imgcontainer").appendChild(image); // This worked, too
// $("#imgcontainer").html("<img src=\"sample.gif?d=" + new Date() + "\"></img>"); // Failed
// document.getElementById("imgcontainer").innerHTML = "<img src=\"sample.gif?d" + new Date() + "\"></img>"; // Failed
$("#imgcontainer").scrollTop(25);
};
image.onerror = function () {
$("#imgcontainer").empty().html("That image is not available.");
}
$('#imgcontainer').empty().html('Loading...');
Ключ, я полагаю, использовал метод onload.Я попытался использовать jQuery.html () внутри метода onload, и он не сработал.Таким образом, это подтверждает, что определенно возникла проблема синхронизации, связанная с innerHTML, а также с тем, как и когда изображение загружается в DOM.И метод onload, в сочетании с собственным методом appendChild в DOM или эквивалентной реализацией appendChild в jQuery, устранил проблему.
Update3:
Относительно предложения Мртшермана, приведенного ниже
Вот мой код:
var outerDIV, innerDIV, html;
outerDIV = document.createElement("div");
outerDIV.id = "content";
document.getElementById("body_id").appendChild(outerDIV); // attach div to body
innerDIV = document.createElement("div");
innerDIV = "ImageHolder";
image = new Image();
image.src = "sample.gif?d=" + new Date();
document.getElementById("content").appendChild(innerDIV);
document.getElementById("ImageHolder").style.height=image.height + "px";
document.getElementById("ImageHolder").style.width=image.width + "px";
html = "<img src=\"sample.gif\"></img>";
$("#content").scrollTop(100);
$("#ImageHolder").html(html);
Я создал внутренний div для размещения изображения. После создания указанного элемента div я изменил его размер в зависимости от размеров изображения. Я настроил прокрутку в js, а затем прикрепил изображение к DOM через innerHTML, и оно не прокручивалось. Я изменил ширину и высоту до некоторого фиксированного размера, большего, чем изображение, и оно прокручивалось. Но это не желаемый эффект, чтобы сделать контейнер больше, чем изображение. Спасибо за вашу помощь.
Update4:
Что эквивалентно коду, который я написал в Update2 при использовании document.createElement ("img") вместо нового Image ()? Событие onload не оказывает такого же влияния, как в объекте Image; Событие onload здесь является важным компонентом.
Спасибо.