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

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

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

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

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

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

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

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


javascript internet-explorer
person Walt W    schedule 16.12.2009    source источник
comment
Я считаю, что у меня была аналогичная проблема, но я так и не нашел полностью удовлетворительного решения ... Однако на ум приходит одна вещь, которая влияет на фоновые изображения css в IE. Позвольте мне посмотреть, и я добавлю еще один комментарий или ответ   -  person J5.    schedule 17.12.2009
comment
Хорошо, может это быть разновидностью этой проблемы с мерцанием? stackoverflow.com/questions/1810828 /   -  person J5.    schedule 17.12.2009
comment
Еще одна вещь, если у вас задействована вспышка, эта проблема меня раньше беспокоила: groups.google.com/group/Google-Maps-API/browse_thread/thread/   -  person J5.    schedule 17.12.2009
comment
Собственно, решение cballou решило бы проблемы как с мерцанием, так и с загрузкой :)   -  person Walt W    schedule 17.12.2009

Ответы (1)


arrow_upward
1
arrow_downward

Один из подходов - переместить ваше изображение при наведении курсора с $(document).ready на $(document).load.

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

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

.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');
});
person Corey Ballou    schedule 16.12.2009
comment
Ага . . . Мне отчасти понравилось, что это будет в отдельных изображениях, но я думаю, что в конечном итоге вы, конечно же, окажетесь правы. Конечно, это хорошее решение. Я закружу. - person Walt W; 17.12.2009
comment
Не знаю, почему я сделал предположение, что вы используете jQuery. Виноват. - person Corey Ballou; 17.12.2009
comment
Потому что я сказал, что сделал в вопросе :) - person Walt W; 17.12.2009