А можно ли остановить загрузку конкретной каритинки Javascript

Question

[Maxima]

Из области фантастики конечно, но вдруг…
Понятно что можно остановить загрузку всей страницы stop() и тогда все загрузки тоже отвалятся,
но это не то что нужно, нужно сказать стоп конкретной картинке если она слишком долго грузится.

Решение найдено.
Вот его автор paaashka
Реально помог довести наш скрипт до идеала.
Потратил на меня кучу времени но добил таки его, на чистом JS

Comments

[Maxima]

1) XMLHttpRequest не подходит, он не кроссдоменный.
2) Что-то сделать с самой картинкой (img), изменить атрибут src, преобразовать в другой тег, это не работает.

[Maxima]

3) execCommand(«Stop», false); не подходит, если и будет работать то только в IE.
4) img.fireEvent(«abort»); не подходит, если и будет работать то только в IE.
5) Скрипт стоит на разных сайтах/доменах отличных от сервера на котором расположена картинка.

[Maxima]

6) removeAttr('src') и удаление элемента img, не помогает.

[Maxima]

7) Я проверяю в Chrome, Safari, Firefox, Opera, IE6-8

Answer 1

[Павел Вирский]

А если для картинки динамически создавать iframe с ней, и если не пришло событие из айфрейма о том, что картинка загрузилась, то удалять айфрейм вместе с картинкой? Сейчас попробовал — при удалении айфрейма, загрузка картинки останавливается.

Comments

[Maxima]

Я ждал такое предложение :-) и даже пробовал, но у меня не получилось корректно это сделать, можно пример кода, круто если не jQuery

[Maxima]

У меня даже была мысль грузить картинку в iframe и потом там уже говорить stop() но я не уверен что это сработало бы, а проверить не получилось, что то я не так делал там.

[Павел Вирский]

Сейчас попробую для начала на jQ накидать, и, если заработает, то перенесём на чистый JS.

[Павел Вирский]

IE всё-таки не так прост оказался. Пока не смог для него нормальное решение сделать, он продолжает грузить iframe. Завтра ещё попробую, если что, напишу в личку.

[Павел Вирский]

Кажется получилось :) Непричёсанные исходники на смеси jQ и чистого js можно взять здесь. Закинуть на сервер и запустить index.php. Увеличив sleep в img.php до 4-5 секунд, можно увидеть, что загрузка файла отменяется.
Ещё есть куда дорабатывать, но идея кажется правильной.

[Maxima]

Огоо! Это мне на двое суток разбиратся, но действительно вроде работает. Теперь буду думать как из этого сделать чистый js…
Я думал код будет слегка прощее :-))

Answer 2

[JeanLouis]

Можно попробовать два варианта.

Первый, очевидный, что-то сделать с самой картинкой (img), изменить атрибут src, преобразовать в другой тег. Но скорее всего это не работает, поэтому вы и спрашиваете.

Второй, теоретически возможный вариант. Это сделать ajax запрос к нужной картинке и в нужный момент вызвать метод abort объекта XMLHttpRequest (например, функция jQuery $.ajax возвращает подобный объект). Таким образом, если предположить, что браузер кеширует запросы, картинка может оказаться в кеше в случае успешного выполнения. Это нужно проверить.

Comments

[Maxima]

Первый очевидный и мною проверенный, и он не работает (ну разве что фаерфокс вроде понимает это).
XMLHttpRequest не подходит, он не кроссдоменный, я не упомянул что это важно.
Чувствую что двое суток потеряны впустую и решения просто нет.

[JeanLouis]

Вы можете транслировать изображения через свой сервер, вроде:
www.yourserver.com/load=path_to_image
Причем можете делать замену ссылок на изображения как до выдачи страницы, так и через javascript после загрузки страницы.

[Maxima]

Не понял как мне это поможет, мне нужно отстрелить картинку если сервер или канал упали дабы у клиентов сайты не ждали ответа от сервера.
Можно сделать stop() но для всей страницы и если там видео грузилось к примеру то ему будет хана как и всему что не успело.

[JeanLouis]

1. Создаете php-скрипт (к примеру), который загружает картинку по переданному адресу url_to_load и отдает клиенту:
www.yourserver.com/url_to_load=http://www.yandex.ru/logo.jpg
То есть если переходить по этой ссылке, должны отображаться картинка по указанному адресу.

2. Делаете ajax-запрос с таймаутом к
www.yourserver.com/url_to_load=http://www.yandex.ru/logo.jpg

3. Если запрос выполнился без выпадения таймаута, значит картинка загрузилась в кеш. В противном случае картинка недоступна.

4. Если все в порядке можете менять атрибут src у img на:
www.yourserver.com/url_to_load=http://www.yandex.ru/logo.jpg
Так как она должна быть в кеше, изображение мгновенно появиться.

5. Profit!

[Maxima]

Как я сделаю ajax-запрос с другого домена/сайта на свой сервер?
Или я вас не правильно понимаю или известными методами это невозможно.

[JeanLouis]

Зачем вас делать запрос с другого сайта? Ваша страница images.html (предположим) лежит на том же сервере что и скрипт подгружающий изображения. Скорее всего вы не понимаете, я вам говорю о действительно рабочем варианте, если браузеры кешируют так как я предполагаю.

[JeanLouis]

Вы говорите что работали 2 дня, а сейчас ночь. Наверное вам лучше пойти спать, и утром посмотреть на то что я предлагаю со свежими силами. :-)

[Maxima]

Я не очень понял причему тут кэширование.
У меня там вообще уникальные префиксы генерятся гетзапросом.
Я говорю что вижу, если браузер запросил картинку то он сволочь будет её грузить и плевать ему на мои действия.
Если сервер на который мы обращаемся упал или медленно отвечает, то браузер будет ждать этот файл.

[Maxima]

И да, запрос именно с другого сайта/домена так как скрипт стоит на разных сайтах.

Answer 3

[nikitammf]

У картинки есть событие «onabort». Может попробывать его тригерировать( img.fireEvent(«abort»))?

Comments

[Maxima]

Пробовал, безрезультатно, может делал что ни так.

[JeanLouis]

Это событие кажется поддерживается только IE

[Maxima]

Да я проверяю в пяти разных браузерах и двух версиях IE.

Answer 4

[sedictor]

Функцию loadedImg удаляет загруженный img из массива еще незагруженных.
Через полминуты, всем незагруженным изображениям меняется src, тем самым прекращая загрузку

var notLoadedImgs = $('img');
$('img').load(function() {loadedImg(this);}); // loadedImg excludes img from notLoadedImgs
setTimeout(function() {
    $(notLoadedImgs).attr('src', '404');
}, 30000);

Comments

[sedictor]

хм, не знал, что src не работает
Тогда по таймауту делать копию DOMElement img с другим src, а исходный удалять

[Maxima]

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

[Maxima]

Я вообще удалил элемент img и толку ноль.
Если он начал, то единственное что его останавливает это stop() но проблема в том что останавливается при этом всё.

Answer 5

[sedictor]

$('img').execCommand("Stop", false);

может так?

Comments

[sedictor]

$('img').each(function(){this.execCommand("Stop", false)});

[Maxima]

Может я ошибаюсь но это если и будет работать то только в IE

[sedictor]

да, действительно

Answer 6

[sedictor]

А попробуйте не менять src, а вообще его убирать removeAttr('src')

Comments

[Maxima]

Это тоже пробовал, не работает.