Purpose: asynchronously load the image and stuff it as a source for the background element. Initial data:

var image = document.images[0]; var downloadingImage = new Image(); downloadingImage.onload = function(){ // set sourc as css ?? // = this.src; }; downloadingImage.src = "/images/login/12.JPG"; 
 <style> .login-layout-transparent { background: url(images/loading.gif) 50% no-repeat; </style>

  • Are resources not asynchronously loaded? For asynchronous setTimeout(function() { element.style.background = 'url(images/loading.gif) 50% no-repeat;'}, 0); - Mr. Black
  • @Doofy, loaded asynchronously, so the background image appears in layers. It is problematic to overtake everything (and there are a lot of background options) into progressive jpeg. Therefore, I want to display a background image after it is fully loaded. Your option with time in an extreme case, because Doesn't Depend Whether The Picture Has Been Downloaded - Vyacheslav Potseluyko
  • Well, if in layers, the same asynchronous script in question image.onload = ... First, src, hide item, on onload show - Mr. Black
  • @Doofy, can you give an answer with the full code? In my understanding, if I’m pushing the url(images/loading.gif) 50% no-repeat; it will also continue to try to download it in layers ... - Vyacheslav Potseluyko
  • @VyacheslavPotseluyko, no, if inside onload you set the url of the loaded image as background-image , the image will most likely be taken from the cache - Grundy

1 answer 1

From the style settings, we take out the src image, create a new one via JS , assign this src and insert it into the block by loading, and remove the background from the block itself

 <div class='img' background='none'></div> 
 .img { background: url(img.jpg); } 
 img = new Image(); image = document.querySelector('.img'); style = window.getComputedStyle(image); img.src = style.backgroundImage.slice(5, -2); image.style.background = 'none'; img.onload = function() { image.appendChild(img); // image.outerHTML = img.outerHTML; // Если блок не нужен, заменяем его изображением }
  • Or in js image.style.background = 'none'; , either immediately in html background='none' - Mr. Black