IE - Javascript для изменения IMG SRC отменяет существующую панель загрузки

Question

Я столкнулся с неясной проблемой, когда загрузка многих страниц на сайте моей компании занимает от нескольких секунд до нескольких минут. Обычно можно ожидать, что собственный индикатор выполнения браузера продолжит вращаться до тех пор, пока не завершатся все невыполненные запросы, но IE остановит индикатор выполнения, когда ЛЮБОЙ запрос вернется. И да, это должно работать с IE. На нашем сайте есть некоторый javascript (jQuery), который меняет background-image элемента DOM, когда другой элемент наведен на мышь, что заставляет IE отправлять запрос и таким образом прерывает существующий индикатор выполнения.

Точная последовательность событий:

1. Нажмите ссылку с длительным временем загрузки (индикатор выполнения вращается правильно)

2. Перемещение мыши по странице во время ожидания, непреднамеренное изменение изображения (индикатор выполнения останавливается)

3. Клиент жалуется, что страница перестала загружаться

Итак, есть идеи? Один из подходов, который я подумал, состоит в том, чтобы изменить курсор мыши на ожидание, когда нажата ссылка, и вернуть курсор на обычный курсор, если нажата кнопка остановки браузера. Однако, кажется, не слишком легко определить, нажимает ли пользователь кнопку «Стоп». , , Единственный другой вариант, который я могу придумать, - это остановить изменение фонового изображения после нажатия на ссылку, но это очень неудачный подход.

Спасибо за помощь:)

Answer 1

Один из подходов состоит в том, чтобы переместить изображение с $(document).ready на $(document).load.

A Лучшее решение будет использовать спрайты в качестве изображения с состоянием включения и выключения для зависания, поэтому вам не нужно менять источник изображения. Вот краткий пример использования jQuery для обработки спрайта:

css (предполагается, что изображение имеет размер 100x200 с каждым состоянием 100x100)

.my-image { height: 100px; width: 100px; background: transparent url('/path/to/img.jpg') 0 0 no-repeat; overflow: hidden; }
.my-image-hover { background-position: 0 -100px !important; }

JQuery

// add class hover to image
$('.my-image').hover(function() {
    $(this).addClass('my-image-hover');
}, function() {
    $(this).removeClass('my-image-hover');
});