Прекратите загружаться изображений на hashchange событии через JavaScript или jQuery
Я использую барбекю jQuery: плагин Back Button & Query Library для создания страницы, которая вытягивает в динамическом контенте, когда на ссылку нажимают. Когда на ссылку нажимают, хеш изменяется, и новое содержание втянуто (действие 'по умолчанию' нажатия на href поэтому отключено.)
Та часть работает просто великолепно, но существует проблема.
Пример моей проблемы
Скажите, что "домашняя" страница имеет DIV много изображений в ней и список ссылок...
- Страница один
- Страница два
- Страница три
Изображения могут требовать времени к загрузке, тем временем пользователь не будет часто ожидать их, чтобы загрузиться полностью и нажать на ссылку "Page One".
Это убирает содержание "домашней" страницы и загрузок на "Странице Одно" содержание. Это хорошо работает.
Проблемой являются изображения от "домашней" страницы, все еще загружаются в браузере даже при том, что пользователь шел дальше от "домашней" страницы.
Я знаю, что это происходит becuase, который на самом деле не изменила страница, и я использую взлом hashchange Плагина барбекю, но я хочу знать, существует ли путь в JavaScript, чтобы сказать всем изображениям, в настоящее время загружающимся останавливаться на hashchange событии?
?? Пример кода был бы похож...
$(window).bind('hashchange', function () {
//code to stop images from loading
// now load in new HTML content
});
2 ответа
Я протестировал это решение в WebKit (Chrome/Safari), Firefox и IE, и, похоже, оно работает.
Я использовал функцию, которая использует window.stop(); для большинства браузеров, и собственный способ IE, если браузер не поддерживает window.stop()
См. подробнее здесь: https://developer.mozilla.org/en/DOM/window.stop
Итак, для браузеров, которые поддерживают это (Firefox, WebKit) используйте:
window.stop();
Для IE используйте:
document.execCommand("Stop", false);
Однако будьте осторожны ...
Это, по сути, как нажатие кнопки "стоп" в браузере, так что все, что загружается в данный момент, будет остановлено, а не только изображения (как я хотел.)
Итак, внутри ...
$(window).bind('hashchange', function () {
});
Вот функция, которую я использовал ...
function stopDownloads() {
if (window.stop !== undefined) {
window.stop();
}
else if (document.execCommand !== undefined) {
document.execCommand("Stop", false);
}
}
Я достаточно уверен, что это невозможно (но буду счастлив, если ошибаюсь).
Причина в том, что изображения, встроенные в ваш веб-сайт, приводят к отправке HTTP-запросов GET на ваш сервер. Как только этот запрос будет отправлен, ваш сервер будет обрабатывать и отвечать на этот запрос, который будет обрабатываться браузером.
Теперь, если это возможно, я предполагаю, что это потребует либо прохождения каждого изображения и обнуления его атрибута src (что, я думаю, не сработает, потому что, как я уже сказал, запросы уже отправлены). Либо это, либо вызов некоторого (вероятно, зависящего от браузера) механизма, который останавливает загрузку изображения.