Как проверить, загрузилось изображение Base64 или нет?

Question

[Snatch08]

Всем доброго дня!
Подскажите плиз, как узнать, загрузилось изображение в кодировке Base64 или нет. Как для обычных картинок сделать знаю, но для Base64 ничего в тырнете найти не могу( Формат другой использовать не могу, только в этом.

Comments

[Надим]

Загрузилось... что ты имеешь в виду? Куда ты там его загружаешь и чем? Пример кода нужен.

[Snatch08]

Надим Закиров, ну вот например с помощью скрипта ниже, можно чекнуть, загрузилось ли изображение:

let Neuqedee = document.querySelectorAll('img'),
    Beuqedee = '',
    Deuqedee = 0;

Neuqedee.forEach(function(Meuqedee){

  Beuqedee = new Image();

    Beuqedee.onload = function(){

      Deuqedee++;

        if(Deuqedee === Neuqedee.length){

          console.log('Готово, изображение полностью загрузилось')
        }
    }

    Beuqedee.src = Meuqedee.src;
});

Работает для обычных изображений, типо *.png, но не работает для изображений в формате Base64

[Надим]

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

[Snatch08]

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

[Надим]

Snatch08, проверяйте размер сразу.

[Snatch08]

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

[Надим]

Snatch08, правильно понимаю, что у вас изначально в разметке страницы пустые теги <img src=""> и уже в процессе отрисовки страницы ajax-ом динамически в эти пустые теги подгружаете base64?

[Snatch08]

Надим Закиров, Да, примерно так

[alexalexes]

А разве событие onload на img не зависит от источника данных в src? Насколько помню, как только img получает корректные данные картинки, он сразу поджигает это событие, а в этом обработчике уже все размеры получить можно.

[Надим]

alexalexes, проверять надо. Но base64 это не ссылка, это буквально само изображение, его не надо грузить, оно уже вот есть в виде строки, поэтому я ХЗ возникает там событие или не возникает.

Answer 1

[Надим]

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

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

Comments

[Snatch08]

Шикарно! Это именно то что я искал. Оочень благодарен!