Можно ли как-ть дождаться загрузки изображения через URL в тэге img?

Question

[nluparev]

Всем привет.

Ситация следующая. Есть URL указывающая на картинку. Картинка отображаеться в img тэге. Нужно показать контейнер вместе с этой картинкой только когда картинка уже было загружена в браузер, иначе сначала видна рамка и заголовок и затем только показывается изображение что не очень красиво смотриться.

Answer 1

[Дмитрий]

var img = new Image;
img.onload = function(e){
  // ... after loading
};
img.src = '{YOUR_IMAGE_SOURCE}';

// здесь добавим картинку в DOM

Answer 2

[Максим Тимофеев]

Загружаете везде в src рамку в виде svg картинки. Далее по предложенной Дмитрий схеме, по мере загрузки, заменяете src в картинках. Url картинки при этом можно хранить в дата атрибутах, будет что-то типа такого:

<img src="some_small_simple.svg" width="200px" height="100px" data-img="/some/url/to/img.jpg">

выбираете все картинки с data-img и в цикле выполняете загрузку и замену.
Другие варианты