Как отменить изображение с загрузки

Question

Предположим, в Javascript вы назначаете SRC для тега IMG. Это большой SRC, и вы хотите отменить его до завершения загрузки. Назначение SRC другому изображению не остановит загрузку данных.

То есть, в середине загрузки вы можете назначить SRC другому меньшему изображению, и меньшее изображение будет загружено и появится в вашем браузере. Тем не менее, оригинальный SRC продолжает загружаться.

Аналогичным образом, удаление узла IMG не помешает SRC продолжать загрузку. Не угадайте, пожалуйста, посмотрите шаги воспроизведения.

REPRO

(1) Загрузить этот URL в Chrome в Windows: http://68.178.240.17/imgLoadTest/imgLoadTest.htm

(2) Откройте панель разработчика, нажав CTRL-SHIFT-J

(3) В верхнем ряду значков на панели разработчика Chrome щелкните значок «Сеть», чтобы посмотреть сетевую активность.

(4) На веб-странице, загруженной на шаге 1, нажмите кнопку «Загрузить изображение» и посмотрите на панель разработчика, когда начинает загружаться большое (32 мг) изображение.

(5) На веб-странице нажмите кнопку «Попробовать отменить», чтобы загрузить другое изображение.

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

Answer 1

Обновлено

Установка атрибута src тега img в пустую строку прервет текущую загрузку, даже в Chrome.

В настоящее время большая часть В браузерах реализован этот нестандартный механизм, представленный в старом ответе, для программного прерывания соединения.Это достигается не посредством запроса протокола, а с помощью операции в памяти на стороне клиента.Имейте в виду, что это не стандартное поведение, но большинство поставщиков вежливы.То есть он не может работать на каждом браузере.

Я подготовил jsfiddle , показывающий этот механизм в действии (следите за панелью network винспектор).

СТАРЫЙ ОТВЕТ (2011)

Ваш браузер запрашивает это изображение с определенным HTTP-запросом GET, как указано в протоколе HTTP.Как только он запрашивает его, http-сервер начинает передачу.

Итак, он происходит между браузером (в качестве http-клиента) и http-сервером.

Поскольку протокол http не учитываетЧтобы прервать передачу, браузер должен реализовать нестандартный механизм программного прерывания соединения.Но так как это не указано ни в одном стандарте, я думаю, вы не найдете способа сделать это с помощью JavaScript или любого клиентского кода.

Answer 2

Хотя я не могу найти отчет об ошибке сейчас, я считаю, что это давно зарегистрированная ошибка WebKit. Firefox (и IE, я думаю) ведут себя более разумно. Я немного возвращаюсь в своем мозгу, но если я вспомню в тех браузерах, сброс img.src фактически отменит невыполненные загрузки. Я уверен, что Firefox делает это, когда загрузка «ожидает в очереди», чтобы получить шанс при открытом HTTP-соединении, и я, кажется, вспоминаю, что это иногда вызывает принудительное закрытие соединений.

Я никогда не находил способ заставить браузеры на основе WebKit отменить текущую загрузку img, будь то в очереди или уже активно загружается.

Это действительно отстой, если вы делаете что-то вроде картографического клиента и вам нужен более точный контроль над изображениями.

Answer 3

Отмена с прозрачным GIF в кодировке base64, чтобы избежать дополнительных запросов и двойной загрузки страницы на Android:

var img = new Image();
img.src = 'http://google.com/favicon.ico';

img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAI=;'

Answer 4

Установка свойства .src в пустую строку должна отменить загрузку:

//load image from url
var img = new Image();
img.src = 'http://somedomain.com/image.jpg';

......

//cancel load
img.src = '';

Answer 5

эта работа для меня:

imageVarName.src = '';
imageVarName.onload = null;
imageVarName.onerror = null;

Answer 6

Окончательный ответ - веб-работники.Загрузите изображение в веб-работника, и остановка веб-работника остановит загрузку изображения.

Вы можете получить идею из этого кода: https://github.com/NathanWalker/ng2-image-lazy-load

Answer 7

свойство src должно быть действительным непустым URL Поэтому нулевая или пустая строка не являются допустимыми (хотя иногда они работают).

ИСПОЛЬЗОВАТЬ: img.src='http://xxxx'; img.onerror=null;

(см. здесь )

Answer 8

Да, страница загружается дважды на Android, когда тег img имеет атрибут src = "".
Это все еще происходит в последних версиях Android.
Я не нашел ни одного другого браузера, который бы это делал.
Но я нашел решение: использовать тег img без атрибута src.