Почему при полной загрузке изображение оно все равно рендерится при вставке в DOM?

Question

[Денис Букреев]

Такие дела.

У меня есть пачка картинок, которые динамически меняются.
Перед использованием я каждую загружаю:

let i = 1;
            function loadImage () {
                let img = new Image();
                img.onload = () => {
                    if (i === count) {
                        resolve();
                    } else {
                        i++;
                        loadImage();
                    }
                };
                img.src = path;
            }
            loadImage();

И, когда я их непосредственно вставляю в DOM, то они начинают рендериться! Причем, многие из них рендерятся частично и это жутко раздражает.

Что можно с этим сделать?

Comments

[Виталий]

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

[Денис Букреев]

Виталий: все равно та же борода
в сафари почему-то перед рендером вообще фон черный у блока (заливаю через стили, не картинкой)
браузер-инвалид

Answer 1

[Вадим]

Так работают браузеры.

Обычно делал так:

• Загружаю картинку
  
• Вставляю в DOM элемент с position:absolute:left:-99999px;
  
• Вставляю в нужное место тот же src
  

Браузер второй раз не рендерит одну и ту же картинку, а берет старую.