How can I check if a background image is loaded

Question

I want to set a background image on the body tag  then run some code - like this      body   css  background-image   http   picture de image png   load function         alert  Background image done loading           This doesn t work       How can I make sure the background image is fully loaded

User · Answer

pure JS solution that will add preloader, set the background-image and then set it up for garbage collection along with it's event listener:

Short version:

_x000D_

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";_x000D_
let bgElement = document.querySelector("body");_x000D_
let preloaderImg = document.createElement("img");_x000D_
preloaderImg.src = imageUrl;_x000D_
_x000D_
preloaderImg.addEventListener('load', (event) => {_x000D_
    bgElement.style.backgroundImage = `url(${imageUrl})`;_x000D_
    preloaderImg = null;_x000D_
});

_x000D_

A bit longer with nice opacity transition:

_x000D_

const imageUrl = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";_x000D_
let bgElement = document.querySelector(".bg-lazy");_x000D_
bgElement.classList.add("bg-loading");_x000D_
let preloaderImg = document.createElement("img");_x000D_
preloaderImg.src = imageUrl;_x000D_
_x000D_
preloaderImg.addEventListener('load', (event) => {_x000D_
  bgElement.classList.remove("bg-loading");_x000D_
  bgElement.style.backgroundImage = `url(${imageUrl})`;_x000D_
  preloaderImg = null;_x000D_
});

_x000D_

.bg-lazy {_x000D_
  height: 100vh;_x000D_
  width: 100vw;_x000D_
  transition: opacity 1s ease-out;_x000D_
}_x000D_
_x000D_
.bg-loading {_x000D_
  opacity: 0;_x000D_
}

_x000D_

<div class="bg-lazy"></div>

_x000D_

User · Answer

try this       lt img  gt    attr  src    http   picture de image png   on  load   function          this  remove       prevent memory leaks as  benweet suggested       body   css  background-image    url http   picture de image png           this will create new image in memory and use load event to detect when the src is loaded

User · Answer

I did a pure javascript hack to make this possible    lt div class  my background image  style  background-image  url broken-image jpg   gt   lt img class  image error  src  broken-image jpg  onerror  this parentElement style display  none    gt   lt  div gt    Or  onerror  this parentElement backgroundImage    url  image placeHolder png       css    image error       display  none

User · Answer

Here is a simple vanilla hack    function image     image onload   function                          body  addClass  loaded-background                       alert  Background image done loading                          TODO fancy fade-in                       image src       quot http   picture de image png quot      new Image

User · Answer

There are no JS callbacks for CSS assets

User · Answer

I have a jQuery plugin called waitForImages that can detect when background images have downloaded      body      css  background-image   url http   picture de image png       waitForImages function         alert  Background image done loading           This  does  work        noop  true

User · Answer

I ve located a solution that worked better for me  and which has the advantage of being usable with several images  case not illustrated in this example    From  adeneo s answer on this question       If you have an element with a background image  like this   lt div id  test  style  background-image  url link to image png   gt  lt div gt        You can wait for the background to load by getting the image URL and   using it for an image object in javascript with an onload handler  var src       test   css  background-image    var url   src match              1  replace        g       var img   new Image    img onload   function         alert  image loaded      img src   url  if  img complete  img onload

User · Answer

https   github com alexanderdickson waitForImages     selector   waitForImages       finished  function                              each  function                              waitForAll  true

User · Answer

Here is a small plugin I made to allow you to do exactly this  it also works on multiple background images and multiple elements   Read the article   http   catmull uk code-lab background-image-loaded   or go straight to the plugin code   http   catmull uk downloads bg-loaded bg-loaded js  So just include the plugin and then call it on the element    lt script type  text javascript  src  http   catmull uk downloads bg-loaded bg-loaded js  gt  lt  script gt   lt script type  text javascript  gt        body   bgLoaded     lt  script gt    Obviously download the plugin and store it on your own hosting   By default it adds an additional  bg-loaded  class  to each matched element once the background is loaded but you can easily change that by passing it a different function like this    lt script type  text javascript  src  http   catmull uk downloads bg-loaded bg-loaded js  gt  lt  script gt   lt script type  text javascript  gt        body   bgLoaded         afterLoaded   function              alert  Background image done loading                    lt  script gt    Here is a codepen demonstrating it working   http   codepen io catmull pen Lfcpb

User · Answer

Something like this   var  div      div      bg    div css  background-image      if  bg        var src   bg replace    url                 g              img       lt img gt    attr  src   src  on  load   function                do something  maybe           div fadeIn

[javascript] How can I check if a background image is loaded?

Examples related to javascript

Examples related to jquery