How do I use JQuery to delay an animation until the background image has loaded?

Question

I have an animation that fades in after around 1 second of the user clicking on the webpage. However, as the text that fades in is white, it requires the background image to be loaded already before this happens.

Given that some of my users may have a slow internet connection, I want to delay the animation until the background image has loaded?

Do you have any recommendations on how to do this?

I was thinking that it might be possible to create a JQuery script that only creates the animation class using the Document Ready function.

However, I have no knowledge in this, as my use of Javascript so far is very limited beyond online tutorials.

Could somebody please provide a quick JSfiddle as to how to only start the animation once the image loads?

I would look into the [imagesLoaded](https://imagesloaded.desandro.com/) javascript plugin. It does have a section for [background images](https://imagesloaded.desandro.com/#background) — zgood, May 15 '17 at 20:04

score 1 · Answer 1 · answered Dec 31 '18 at 18:47

If anyone is looking for a vanilla JavaScript solution for this problem, you can:

Pause your CSS animation.
Wait for the document to load (includes background images).
Start your CSS animation.

For example:

CSS

.element {
animation-play-state: paused;
}

JS

function startAnimation() { 
document.querySelector('.element').style.animationPlayState = 'running';
}
window.addEventListener('load', startAnimation);

score 0 · Answer 2 · edited May 23 '17 at 12:34

Shure, simply wait for the image to load, then add the click handler:

 $('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {//wait for the page load
   $(this).remove(); // prevent memory leaks as @benweet suggested

   $('body').css('background-image', 'url(http://picture.de/image.png)');//assign the bg image, bg is now ready:
   $(window).on("click",alert);//assign the eventlistener
 });

Major part taken from How can I check if a background image is loaded?

score 0 · Answer 3 · answered May 15 '17 at 20:08

The general concept here would be to create an image in js, add an onload function, then set the src of the image to whatever the image is that you want to load first. Then put whatever your animation does inside of the onload function.

var img = new Image();
img.onload = function() {
  document.getElementById('div').classList.add('fadein');
}
img.src = "http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg";

div {
  height: 100vh;
  background-image: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg');
  background-size: cover;
  opacity: 0;
  transition: opacity .5s;
}

.fadein {
  opacity: 1;
}

<div id="div"></div>

Dalin Huang · Answer 4 · 2017-05-15T20:20:49.560

var image = new Image();
image.onload = function() {
  $('body').append('<img class="bg-img" src="' + image.src + '" </img>');
  $('.bg-img').fadeTo(1000, 1);
}

image.onerror = function() {
  console.error("Sorry! Cannot load image");
}
image.src = "http://placehold.it/800x500";

.bg-img{
  width: 100vw;
  height: auto;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

How do I use JQuery to delay an animation until the background image has loaded?

4 Answers4