Changing background-image once gif has loaded?

Question

Ok so basically i'm using a gif as a background image, however i'd like it to display a static image until the gif has fully loaded and be ready to play.

Having read a few similar threads i know you can target elements with js and change them once they've loaded however the only examples i've seen target img tags and not a background image via css.

Heres a snippet if it helps

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  width: 100%;
  height: 100%;
  background: #232228 url(../img/bg-center.jpg) top no-repeat; /* Static */
  background: #232228 url(../img/bg-center.gif) top no-repeat; /* Animated */
}

try this http://stackoverflow.com/questions/29742508/show-loading-gif-while-image-is-loading — Udhay Titus, Jul 26 '16 at 04:15
Im not using image tags though, ive seen a few posts about it with image tags but cant find anything to specifically target only the background image — Izaak Lindsay, Jul 26 '16 at 04:20
You should use an regular image so you can use an onload Event. There are no DOM Events for a background-image. — StackSlave, Jul 26 '16 at 04:26
Why not use a canvas, and just have it display your static image until the gif is ready? If you want the element as a background, just use the z-index to draw it in the background. — Chris, Jul 26 '16 at 04:27

score 0 · Accepted Answer · answered Jul 26 '16 at 04:23

0

I am afraid that you will have to use JS for this, use images loaded plugin to see if the gif image is loaded then change the bg property

answered Jul 26 '16 at 04:23

Shintu Joseph

962
7
19

hmm any idea why this isnt working? ` ` – Izaak Lindsay Jul 26 '16 at 04:54
Can you give me a fiddle? – Shintu Joseph Jul 26 '16 at 04:58
@IzaakLindsay see the updated fiddle, passing the className is the issue – Shintu Joseph Jul 26 '16 at 05:14
yeah i got that, i was trying to add the function to add the bgloaded class to the body once that image had loaded – Izaak Lindsay Jul 26 '16 at 05:18
https://jsfiddle.net/vf4pcux9/8/ Its not waiting for the gif to load before adding the class – Izaak Lindsay Jul 26 '16 at 05:24
Sorry Don't have access to my pc – Shintu Joseph Jul 26 '16 at 05:26

Changing background-image once gif has loaded?

1 Answers1