Javascript createelement img onload

Javascript — execute after all images have loaded

would answer my question. I have tried this but it executes the code the instant the page loads (not after the images load). If it makes any difference the images are coming from a CDN and are not relative. Anyone know a solution? (I’m not using jQuery)

10 Answers 10

Promise.all(Array.from(document.images).filter(img => !img.complete).map(img => new Promise(resolve => < img.onload = img.onerror = resolve; >))).then(() => < console.log('images finished loading'); >); 

Pretty backwards-compatible, works even in Firefox 52 and Chrome 49 (Windows XP era). Not in IE11, though.

Replace document.images with e.g. document.querySelectorAll(. ) if you want to narrow the image list.

It uses onload and onerror for brevity. This might conflict with other code on the page if these handlers of the img elements are also set elsewhere (unlikely, but anyway). If you’re not sure that your page doesn’t use them and want to be safe, replace the part img.onload = img.onerror = resolve; with a lengthier one: img.addEventListener(‘load’, resolve); img.addEventListener(‘error’, resolve); .

It also doesn’t test whether all images have loaded successfully (that there are no broken images). If you need this, here’s some more advanced code:

Promise.all(Array.from(document.images).map(img => < if (img.complete) return Promise.resolve(img.naturalHeight !== 0); return new Promise(resolve => < img.addEventListener('load', () =>resolve(true)); img.addEventListener('error', () => resolve(false)); >); >)).then(results => < if (results.every(res =>res)) console.log('all images loaded successfully'); else console.log('some images failed to load, all finished loading'); >); 

It waits until all images are either loaded or failed to load.

If you want to fail early, with the first broken image:

Promise.all(Array.from(document.images).map(img => < if (img.complete) if (img.naturalHeight !== 0) return Promise.resolve(); else return Promise.reject(img); return new Promise((resolve, reject) => < img.addEventListener('load', resolve); img.addEventListener('error', () =>reject(img)); >); >)).then(() => < console.log('all images loaded successfully'); >, badImg => < console.log('some image failed to load, others may still be loading'); console.log('first broken image:', badImg); >); 

Two latest code blocks use naturalHeight to detect broken images among the already loaded ones. This method generally works, but has some drawbacks: it is said to not work when the image URL is set via CSS content property and when the image is an SVG that doesn’t have its dimensions specified. If this is the case, you’ll have to refactor your code so that you set up the event handlers before the images begin to load. This can be done by specifying onload and onerror right in the HTML or by creating the img elements in the JavaScript. Another way would be to set src as data-src in the HTML and perform img.src = img.dataset.src after attaching the handlers.

Источник

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

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

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

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

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

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

let script = document.createElement('script'); script.src = "my.js"; document.head.append(script);

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

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

script.onload

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

let script = document.createElement('script'); // мы можем загрузить любой скрипт с любого домена script.src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.js" document.head.append(script); script.onload = function() < // в скрипте создаётся вспомогательная переменная с именем "_" alert(_.VERSION); // отображает версию библиотеки >;

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

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

script.onerror

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

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

let script = document.createElement('script'); script.src = "https://example.com/404.js"; // такого файла не существует document.head.append(script); script.onerror = function() < alert("Ошибка загрузки " + this.src); // Ошибка загрузки https://example.com/404.js >;

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

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

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

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

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

let img = document.createElement('img'); img.src = "https://js.cx/clipart/train.gif"; // (*) img.onload = function() < alert(`Изображение загружено, размеры $x$`); >; img.onerror = function() < alert("Ошибка во время загрузки изображения"); >;

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

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

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

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

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

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

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

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

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

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

Мы видим нормальный отчёт об ошибке:

Uncaught ReferenceError: noSuchFunction is not defined https://javascript.info/article/onload-onerror/crossorigin/error.js, 1:1

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

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

Зачем нам могут быть нужны детали ошибки?

Существует много сервисов (и мы можем сделать наш собственный), которые обрабатывают глобальные ошибки при помощи window.onerror , сохраняют отчёт о них и предоставляют доступ к этому отчёту для анализа. Это здорово, потому что мы можем увидеть реальные ошибки, которые случились у наших пользователей. Но если скрипт – с другого домена, то информации об ошибках в нём почти нет, как мы только что видели.

Похожая кросс-доменная политика (CORS) внедрена и в отношении других ресурсов.

Чтобы разрешить кросс-доменный доступ, нам нужно поставить тегу атрибут crossorigin , и, кроме того, удалённый сервер должен поставить специальные заголовки.

Существует три уровня кросс-доменного доступа:

1. Атрибут crossorigin отсутствует – доступ запрещён.
2. crossorigin=»anonymous» – доступ разрешён, если сервер отвечает с заголовком Access-Control-Allow-Origin со значениями * или наш домен. Браузер не отправляет авторизационную информацию и куки на удалённый сервер.
3. crossorigin=»use-credentials» – доступ разрешён, если сервер отвечает с заголовками Access-Control-Allow-Origin со значением наш домен и Access-Control-Allow-Credentials: true . Браузер отправляет авторизационную информацию и куки на удалённый сервер.

Почитать больше о кросс-доменных доступах вы можете в главе Fetch: запросы на другие сайты. Там описан метод fetch для сетевых запросов, но политика там точно такая же.

Такое понятие как «куки» (cookies) не рассматривается в текущей главе, но вы можете почитать о них в главе Куки, document.cookie.

В нашем случае атрибут crossorigin отсутствовал. Поэтому кросс-доменный доступ был запрещён. Давайте добавим его.

Мы можем выбрать «anonymous» (куки не отправляются, требуется один серверный заголовок) или «use-credentials» (куки отправляются, требуются два серверных заголовка) в качестве значения атрибута.

Если куки нас не волнуют, тогда смело выбираем «anonymous» :

Теперь при условии, что сервер предоставил заголовок Access-Control-Allow-Origin , всё хорошо. У нас есть полный отчёт по ошибкам.

Итого

Изображения , внешние стили, скрипты и другие ресурсы предоставляют события load и error для отслеживания загрузки:

Единственное исключение – это : по историческим причинам срабатывает всегда load вне зависимости от того, как завершилась загрузка, даже если страница не была найдена.

Событие readystatechange также работает для ресурсов, но используется редко, потому что события load/error проще в использовании.

Задачи

Загрузите изображения с колбэком

Обычно изображения начинают загружаться в момент их создания. Когда мы добавляем на страницу, пользователь не увидит его тут же. Браузер сначала должен его загрузить.

Чтобы показать изображение сразу, мы можем создать его «заранее»:

let img = document.createElement('img'); img.src = 'my.jpg';

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

Создайте функцию preloadImages(sources, callback) , которая загружает все изображения из массива sources и, когда все они будут загружены, вызывает callback .

В данном примере будет показан alert после загрузки всех изображений.

function loaded() < alert("Изображения загружены") >preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);

В случае ошибки функция должна считать изображение «загруженным».

Другими словами, callback выполняется в том случае, когда все изображения либо загружены, либо в процессе их загрузки возникла ошибка.

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

В песочнице подготовлены ссылки к тестовым изображениям, а также код для проверки их загрузки. Код должен выводить 300 .

1. Создадим img для каждого ресурса.
2. Добавим обработчики onload/onerror для каждого изображения.
3. Увеличиваем счётчик при срабатывании onload или onerror .
4. Когда значение счётчика равно количеству ресурсов – тогда вызываем callback() .

Источник

Adding an img element to a div with javascript

I am trying to add an img to the placehere div using JavaScript, however I am having no luck. Can anyone give me a hand with my code?

5 Answers 5

document.getElementById("placehere").appendChild(elem); 

document.getElementById("placehere").appendChild("elem"); 

and use the below to set the source

elem.src = 'images/hydrangeas.jpg'; 

@AndrewDeForest: appendChild expects an object and then it should work unless the path to your image is wrong. Check this jsfiddle.net/naveen/S57rs

Hmm, I have no idea. I changed it to elem.src = «images/hydrangeas.jpg» and I still don’t see it. I even wrote out the tag just to make sure the path was correct, and it showed up.

I think my script was running before the DOM finished loading, so I added document.addEventListener(«DOMContentLoaded», function() and it seemed to fix it!

document.getElementById("placehere").appendChild(elem); 

And place your div before your javascript, because if you don’t, the javascript executes before the div exists. Or wait for it to load. So your code looks like this:

To prove my point, see this with the onload and this without the onload. Fire up the console and you’ll find an error stating that the div doesn’t exist or cannot find appendChild method of null .

Forget all the setAttribute calls, just set the properties directly: elem.src = . ; elem.height = . ; elem.alt = . ; and so on.

Agreed, but as far as I know, using this method has no drawbacks. Maybe we should set up a performance test on JSPerf

The difference in performance is negligible, but for the record, here’s one that goes the other way in some browsers. More to the point is the inconsistency of setAttribute across browsers versus the consistency of setting properties. In HTML5 compliant browsers the two do the same thing, so it is hardly surprising that performance in such browsers is nearly identical.

Perhaps it’s faster if you aren’t appending it. That’s what I deduce from that test. You’re right about consistency, of course.

Источник