У меня неприятные проблемы с синхронизацией javascript.
К вашему сведению, страница представляет собой файл jsp, и к указанной странице прикреплен отдельный файл js и файл CDN jQuery. В целях устранения неполадок я удалил весь ненужный контент и код и вставил то, что мне нужно, в отдельные файлы jsp и js для устранения этой конкретной проблемы.
Если бы я мог где-нибудь отобразить html и js, было бы здорово. А пока я опишу это. На странице есть две кнопки: одна для загрузки изображения, а вторая для переключения функции «масштабирования» (подробнее об этом позже). Пользователь нажимает кнопку, которая загружает изображение с помощью DOM, в частности, innerHTML. Это изображение окружено горизонтальной и вертикальной полосами прокрутки. Когда пользователь включает функцию «масштабирования», изображение записывает положение щелчка мыши в событии onclick. Итак, когда это включено, пользователь нажимает на изображение, и загружается более крупная версия того же изображения, опять же, с использованием DOM и innerHTML. Самый последний шаг, самый важный, с использованием положения мыши, полосы прокрутки будут фокусироваться и центрироваться на выбранной точке (с помощью scrollLeft и scrollTop).
Все это безупречно работает в IE. Однако в браузерах, отличных от IE (например, FireFox), требуется пара щелчков мышью, чтобы настройка прокрутки соответствовала внутреннему HTML. То есть, когда пользователь «увеличивает» в первый раз, изображение загружается, но полосы прокрутки не регулируются. Требуется еще два последовательных щелчка, чтобы он заработал так же, как в IE. Я исследовал innerHTML, и в FireFox он работает медленнее, чем в IE.
Как я могу это исправить? Кто-нибудь еще пытался загрузить изображение в FireFox с помощью JavaScript и немедленно настроить положение прокрутки на изображении? Опять же, первый и каждый раз после этого срабатывает в IE. Но у браузеров, отличных от IE, возникают проблемы.
Я пробовал использовать innerHTML, replaceChild, appendChild, ничего из того, что я пробовал, пока не исправляет.
Спасибо.
Обновление: я хотел узнать, связана ли эта проблема с чем-то внутри полос прокрутки или просто с изображениями; поэтому я заменил изображение на ‹p> ...‹ p> и запрограммировал его прокрутку сразу после загрузки ** первого * изображения с помощью инициированного пользователем события onclick. Что интересно, это сработало. Затем я заменил текст изображением, и оно снова было сломано.
Таким образом, после загрузки изображения с использованием DOM (т.е. innerHTML) любые попытки программной прокрутки в браузерах, отличных от IE, будут прерваны. Однако, если вы программно прокрутите еще раз, он будет вести себя нормально.
Обновление2: я попытался использовать методы для программной отмены события в конце вызова и немедленного повторного вызова функции, но это не устранило проблему.
Затем я попытался загрузить изображение с помощью 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 устранил проблему.
Обновление3:
Что касается предложения Мртшермана ниже -
Вот мой код:
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") вместо new Image ()? Событие onload не оказывает такого же влияния, как в объекте Image; событие onload здесь является важным ингредиентом.
Спасибо.
