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

Question

[Snatch08]

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

Comments

[zkrvndm]

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

[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

[zkrvndm]

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

[Snatch08]

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

[zkrvndm]

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

[Snatch08]

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

[zkrvndm]

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

[Snatch08]

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

[alexalexes]

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

[zkrvndm]

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

Answer 1

[zkrvndm]

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

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

Comments

[Snatch08]

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