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

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:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded();
</script>

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:

<script type="text/javascript" src="http://catmull.uk/downloads/bg-loaded/bg-loaded.js"></script>
<script type="text/javascript">
   $('body').bgLoaded({
      afterLoaded : function() {
         alert('Background image done loading');
      }
   });
</script>

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

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   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    gt    x000D      bgElement style backgroundImage    url   imageUrl     x000D      preloaderImg   null  x000D      x000D   x000D   x000D    A bit longer with nice opacity transition     x000D   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    gt    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   lt div class  bg-lazy  gt  lt  div gt  x000D   x000D   x000D

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

There are no JS callbacks for CSS assets

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

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

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

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

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

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

Examples related to javascript

Examples related to jquery