How to animate header background image onload event?

Question

I want my header background image should animate on load. And I have done this

 .header_area{ background-image: url(../img/mobility_solutions.jpg); min-height: 100vh; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; animation: shrink 3s; } @keyframes shrink { 0% {background-size: 110% 110%;} 100% {background-size: 100% 100%;} } 

This is working but not when the page is loading for the first time in a browser. How can I align it to happen on load event always?

You can check it here- http://demogenesystel.mywebkitchen.com/

Answer 1

You can use hidden img tag with link to this image. And after it will load set background-url. While it loading can use svg spinner (for example https://loading.io/ ) and css class with opacity:0

//javascript:
var hiddenImg = $('<img />').addClass('hidden')
hiddenImg.attr('src', ....)
hiddenImg.bind('load', function(){
  $(this).addClass('show'))
  var yourTarget = $('..');
  yourTarget.css('background-image', 'url(' + your url + ')');
})
//css
img.hidden {  opacity: 0; }

PS: you don't need to use jQuery for this Javascript callback for knowing when an image is loaded

Answer 2

What you need is to use some simple JS to detect the background-image URL of the element, and load it as part of a dummy <img /> tag so that you can attach an onload event to it to detect if the same image has been successfully loaded.

The background-image extraction requires some simple replace, because it actually returns the entire url(/path/to/image) string, sometimes with optional inverted commas. Therefore, we can use a pattern that matches this:

^url\(["']?(.*?)["']?\)$

Basically the pattern attempts to match url( at the start, with an optional inverted comma, followed by anything in between, then by another optional inverted comma and a closing bracket ) . The first capturing group will be your background-image URL. You can see how it works here .

When we have this, we assign the src attribute to the dummy <img /> element this value. When this element fires the load event, we add the class .header_area--animate , which applies the animation you have defined for the .header_area element.

It is of course possible to write this entire logic in JS, but since you have tagged jQuery, why not? ;)

 $(function() { $('<img />', { src: $('.header_area').css('background-image').replace(/^url\\(["']?(.*?)["']?\\)$/gi,'$1') }).on('load', function() { console.log('Image loaded, adding animation'); $('.header_area').addClass('header_area--animate'); }); }); 

 .header_area { background-image: url("http://deelay.me/1000/http://placehold.it/1000x500"); min-height: 100vh; background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .header_area--animate { animation: shrink 3s; } @keyframes shrink { 0% { background-size: 110% 110%; } 100% { background-size: 100% 100%; } } 

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