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

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

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

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

РЕПРО

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

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

(3) В верхней строке значков на панели разработчика Chrome щелкните значок "Сеть", чтобы посмотреть активность сети.

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

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

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

Ответ 1

Обновление

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

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

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

OLD ANSWER (2011)

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

......

//cancel load
img.src = '';

Ответ 4

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

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

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

Ответ 5

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

Ответ 6

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

USE img.src='http://xxxx'; img.onerror=null;

(см. здесь)

Ответ 7

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

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