Img onerror не работает

Загрузка ресурсов: onload и onerror

Браузер позволяет отслеживать загрузку сторонних ресурсов: скриптов, ифреймов, изображений и др.

Для этого существуют два события:

• load – успешная загрузка,
• error – во время загрузки произошла ошибка.

Загрузка скриптов

Допустим, нам нужно загрузить сторонний скрипт и вызвать функцию, которая объявлена в этом скрипте.

Мы можем загрузить этот скрипт динамически:

…Но как нам вызвать функцию, которая объявлена внутри того скрипта? Нам нужно подождать, пока скрипт загрузится, и только потом мы можем её вызвать.

Для наших собственных скриптов мы можем использовать JavaScript-модули, но они не слишком широко распространены в сторонних библиотеках.

script.onload

Главный помощник – это событие load . Оно срабатывает после того, как скрипт был загружен и выполнен.

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

…А что если во время загрузки произошла ошибка? Например, такого скрипта нет (ошибка 404), или сервер был недоступен.

script.onerror

Ошибки, которые возникают во время загрузки скрипта, могут быть отслежены с помощью события error .

Например, давайте запросим скрипт, которого не существует:

Обратите внимание, что мы не можем получить описание HTTP-ошибки. Мы не знаем, была ли это ошибка 404 или 500, или какая-то другая. Знаем только, что во время загрузки произошла ошибка.

Обработчики onload / onerror отслеживают только сам процесс загрузки.

Ошибки обработки и выполнения загруженного скрипта ими не отслеживаются. Чтобы «поймать» ошибки в скрипте, нужно воспользоваться глобальным обработчиком window.onerror .

Другие ресурсы

События load и error также срабатывают и для других ресурсов, а вообще, для любых ресурсов, у которых есть внешний src .

Однако есть некоторые особенности:

• Большинство ресурсов начинают загружаться после их добавления в документ. За исключением тега . Изображения начинают загружаться, когда получают src (*) .
• Для событие load срабатывает по окончании загрузки как в случае успеха, так и в случае ошибки.

Такое поведение сложилось по историческим причинам.

Ошибка в скрипте с другого источника

Есть правило: скрипты с одного сайта не могут получить доступ к содержимому другого сайта. Например, скрипт с https://facebook.com не может прочитать почту пользователя на https://gmail.com .

Или, если быть более точным, один источник (домен/порт/протокол) не может получить доступ к содержимому с другого источника. Даже поддомен или просто другой порт будут считаться разными источниками, не имеющими доступа друг к другу.

Это правило также касается ресурсов с других доменов.

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

Для примера давайте возьмём мини-скрипт error.js , который состоит из одного-единственного вызова функции, которой не существует:

Теперь загрузим этот скрипт с того же сайта, на котором он лежит:

Источник

Проверка существует ли изображение или нет

Всем здрасти. Вот я решил написать такую маленькую простую программку галерею рисунков, ну в принципе все просто пользователь нажимает кнопки — вперед — назад и картинки соответственно сменяют друг друга.

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

Кое какие идеи у меня есть но знаний не хватает, возник вопрос есть ли какой нибудь способ определить в JS существует ли рисунок с указанным SRC или нет
к примеру
— существует
9 .jpg» onClick=»test()»/> — не существует

На основе полученных данных я мог бы заставить программу определить общее количество рисунков в папке и все их выводить друг за другом.

Проверка, существует ли картинка с заданным именем, или нет
Всем привет! Помогите, пожалуйста! Есть следующий фрагмент кода: if then begin .

Проверка: существует ли изображение на стороннем сайте?
Добрый день. Ситуация такая: у клиента есть 2 сервера (не знаю зачем, но таковы реалии). На.

Существует файл или нет
При подключении флешки появляется новая директория storage/UsbDriveA проверяя существование этой.

Бесшумная мышь существует или нет?
сушествуютли безшумные мыши?или как уменьшить звуки щелчков мышью? думаю мечта каждого.

Причем тут onclick ? Я вообще его для другой цели повесил и к данному вопросу он вообще никакого отношения не имеет.
Хорошо перепишу этот момент
— существует
— не существует
как определить несуществующую картинку?

а вы смешной

ну ладно, так и быть, напишу, раз сами «не догоняете»

вы реально смешной

перевожу написанный вами код на русский язык:
когда вся страница, включая картинки, загрузится, назначьте картинкам исполнение функции на событие их незагрузки, т.е. сообщи — если не сумеешь загрузиться, но только после того, как загрузишься

ваш код — это что-то типа того, что в шутку говорила моя бабушка, когда я отправлялся в деревне купаться на речку: «утонешь — домой не приходи! «

В хроме и опере не работает, там цикл бесконечен и на img.onload / img.onerror никак не реагирует.
В firefox работает но при условии если в цикле есть alert(i); если убираю алерт то цикл тоже становится бесконечным.

Подправьте пожалуйста в чем ошибка?

сначала назначаете функции для событий onload и onerror картинки
и только потом указываете src картинки

здесь порядок имеет значение!

Попробовал ваш пример, да вроде бы работает, но что если количество картинок превысит 100 или 1000 каждый раз менять код?
И еще почему обязательно сначала повесить функцию с событием а только потом src?

Я не спорю что это не правильно или еще что то просто пытаюсь понять как оно так работает.
Попытался поменять местами эти вещи вот так вот

Код все равно остается рабочим, то есть изменений я не увидел.

Смысл то ведь не только в том что бы программу сделать, я пытаюсь заодно немного подучиться, поэтому хочу получше разобраться как это все устроено.

команда t.onload = function() — это работа оперативной памяти компьютера, исполняется практически сразу, ибо скорость исполнения этой команды определяется только быстродействием конкретного компьютера
а вот сказать что-то точно про скорость исполнения команды t.src = ‘img_’ + j + ‘.jpg’; не сможет никто, потому что она определяется очень большим количеством факторов: скорость её исполнения зависит и от быстродействия компьютера, и от быстродействия хоста, где данная картинка размещена, и от состояния сети в тот момент времени, когда эта команда будет исполняться и от того — имеется ли уже эта катинка в кеше браузера или не имеется.

т.е. в 999-ти случаях из тысячи команда t.onload = function() успеет выполниться до момента окончания загрузки картинки
но остаётся тот самый 1 случай из тысячи, когда в момент загрузки картинки из сети конкретный комп чуть-чуть подвиснет» из-за, например, параллельного открытия какой-нибудь ресурсозатратной программы на компьютере. и вот тогда картинка уже загрузится, событие onload произойдёт, а в оперативной памяти компьютера ещё не будет инструкции — что делать в случае окончания загрузки

так что ваши эксперименты попали на те самые 999 случаев из тысячи — когда всё сработало в штатном режиме.
но программист не должен полагаться на волю случая, он должен писать программу так, чтобы она одинаково успешно отработала в 1000 случаев из 1000

да и просто по логике ребёнку следует заранее разъяснить, что ему при переходе проезжей части надо делать при соответствующем сигнале светофора (при красном — стоять, при жёлтом — быть готовым, а при зелёном — идти) а не надеяться на то, что вы успеете ему в последний момент крикнуть «стой!»

Источник

Resource loading: onload and onerror

The browser allows us to track the loading of external resources – scripts, iframes, pictures and so on.

There are two events for it:

• onload – successful load,
• onerror – an error occurred.

Loading a script

Let’s say we need to load a third-party script and call a function that resides there.

We can load it dynamically, like this:

…But how to run the function that is declared inside that script? We need to wait until the script loads, and only then we can call it.

For our own scripts we could use JavaScript modules here, but they are not widely adopted by third-party libraries.

script.onload

The main helper is the load event. It triggers after the script was loaded and executed.

So in onload we can use script variables, run functions etc.

…And what if the loading failed? For instance, there’s no such script (error 404) or the server is down (unavailable).

script.onerror

Errors that occur during the loading of the script can be tracked in an error event.

For instance, let’s request a script that doesn’t exist:

Please note that we can’t get HTTP error details here. We don’t know if it was an error 404 or 500 or something else. Just that the loading failed.

Events onload / onerror track only the loading itself.

Errors that may occur during script processing and execution are out of scope for these events. That is: if a script loaded successfully, then onload triggers, even if it has programming errors in it. To track script errors, one can use window.onerror global handler.

Other resources

The load and error events also work for other resources, basically for any resource that has an external src .

There are some notes though:

• Most resources start loading when they are added to the document. But is an exception. It starts loading when it gets a src (*) .
• For , the iframe.onload event triggers when the iframe loading finished, both for successful load and in case of an error.

That’s for historical reasons.

Crossorigin policy

There’s a rule: scripts from one site can’t access contents of the other site. So, e.g. a script at https://facebook.com can’t read the user’s mailbox at https://gmail.com .

Or, to be more precise, one origin (domain/port/protocol triplet) can’t access the content from another one. So even if we have a subdomain, or just another port, these are different origins with no access to each other.

This rule also affects resources from other domains.

If we’re using a script from another domain, and there’s an error in it, we can’t get error details.

For example, let’s take a script error.js that consists of a single (bad) function call:

Now load it from the same site where it’s located:

Источник

Javascript onError не работает правильно

Я пытаюсь контролировать фон, если он доступен или нет. Я вижу, что везде используется ошибка, но не для меня. У меня есть папка bg и background1.jpg для фоновых изображений background4.jpg. Для первых 4 проблем нет. Но background5.jpg не доступен в этой папке. Ошибка не работает. Как я могу решить эту проблему? Есть идеи?

3 ответа

Есть много вещей не так с вашим кодом. Во-первых, вы можете использовать цикл for следующим образом и ожидать, что он попробует каждое изображение:

Это просто не будет делать то, что вы пытаетесь сделать. Это быстро установит каждое последующее значение .src , не позволяя ни одному из них фактически загрузить (асинхронно), чтобы увидеть, успешно ли это выполнено.

Во-вторых, не используйте строку для .onerror . Присвойте ссылку на функцию, например, background.onerror = finisher;

В-третьих, вы ДОЛЖНЫ назначить обработчики onerror и onload ДО того, как назначите .src . Некоторые браузеры (IE поднимает руку) будут загружать изображение немедленно, если ваше изображение находится в кэше браузера, и если ваш обработчик загрузки НЕ уже установлен, вы просто пропустите это событие.

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

Если вы просто пытаетесь найти первый, который успешен, то вы можете использовать другой подход. Пожалуйста, опишите, что вы на самом деле пытаетесь достичь.

Чтобы увидеть, сколько изображений загружено успешно, вы можете сделать это:

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

Источник

Img onerror не работает

Copy raw contents

Copy raw contents

Загрузка скриптов, картинок, фреймов: onload и onerror

Браузер позволяет отслеживать загрузку внешних ресурсов — скриптов, ифреймов, картинок и других.

Для этого есть два события:

• onload — если загрузка успешна.
• onerror — если при загрузке произошла ошибка.

Рассмотрим следующую задачу.

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

Подгрузить внешний скрипт — достаточно просто:

. Но как после подгрузки выполнить функцию, которая объявлена в этом скрипте? Для этого нужно отловить момент окончания загрузки и выполнения тега .

Главным помощником станет событие onload . Оно сработает, когда скрипт загрузился и выполнился.

Это даёт возможность, как в примере выше, получить переменные из скрипта и выполнять объявленные в нём функции.

. А что, если загрузка скрипта не удалась? Например, такого скрипта на сервере нет (ошибка 404) или сервер «упал» (ошибка 500).

Такую ситуацию тоже нужно как-то обрабатывать, хотя бы сообщить посетителю о возникшей проблеме.

Любые ошибки загрузки (но не выполнения) скрипта отслеживаются обработчиком onerror .

Например, сделаем запрос заведомо отсутствующего скрипта:

IE8-: script.onreadystatechange [#onreadystatechange]

Примеры выше работают во всех браузерах, кроме IE8-.

В IE для отслеживания загрузки есть другое событие: onreadystatechange . Оно срабатывает многократно, при каждом обновлении состояния загрузки.

Текущая стадия процесса находится в script.readyState :

loading : В процессе загрузки.

loaded : Получен ответ с сервера — скрипт или ошибка. Скрипт на фазе loaded может быть ещё не выполнен.

complete : Скрипт выполнен.

Например, рабочий скрипт:

Скрипт с ошибкой:

Обратим внимание на две особенности:

Стадии могут пропускаться.

Если скрипт в кэше браузера — он сразу даст complete . Вы можете увидеть это, если несколько раз запустите первый пример.

Нет особой стадии для ошибки.

В примере выше это видно, обработка останавливается на loaded .

Итак, самое надёжное средство для IE8- поймать загрузку (или ошибку загрузки) — это повесить обработчик на событие onreadystatechange , который будет срабатывать и на стадии complete и на стадии loaded . Так как скрипт может быть ещё не выполнен к этому моменту, то вызов функции лучше сделать через setTimeout(. 0) .

Пример ниже вызывает afterLoad после загрузки скрипта и работает только в IE:

Вызов (1) выполнится при первой загрузке скрипта, а (2) — при второй, когда он уже будет в кеше, и стадия станет сразу complete .

Функция afterLoad может и не обнаружить jQuery , если при загрузке была ошибка, причём не важно какая — файл не найден или синтаксис скрипта ошибочен.

Для кросс-браузерной обработки загрузки скрипта или её ошибки поставим обработчик на все три события: onload , onerror , onreadystatechange .

Пример ниже выполняет функцию afterLoad после загрузки скрипта или при ошибке.

Работает во всех браузерах:

Загрузка других ресурсов

Поддержка этих событий для других типов ресурсов различна:

,
(стили) : Поддерживает onload/onerror во всех браузерах.

: Поддерживает onload во всех браузерах. Это событие срабатывает как при успешной загрузке, так и при ошибке.

В этой статье мы рассмотрели события onload/onerror для ресурсов.

Их можно обобщить, разделив на рецепты:

Отловить загрузку скрипта (включая ошибку) : Ставим обработчики на onload + onerror + (для IE8-) onreadystatechange , как указано в рецепте выше

Отловить загрузку картинки или стиля
: Ставим обработчики на onload + onerror

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

Источник