1

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/

M Hamza Javed
  • 1,269
  • 4
  • 17
  • 31
munna_695
  • 61
  • 7
  • You will have to use JS for that. CSS does not have the logic to determine whether an image has been loaded or not. The JS logic, however, is simple: (1) listen to the onload event fired from the image, likely loaded in a hidden image element (2) once loaded, add class to `.header_area` which defines animation. This ensures that the animation does not apply/run on pageload, but only after the image is successfully loaded. – Terry Apr 27 '17 at 07:06

2 Answers2

0

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

Community
  • 1
  • 1
AlexeyKuznetsov
  • 414
  • 4
  • 12
  • Thank you for the help @AlexeyKuznetsov. But it's a background image how to use the CSS indicating the 'img' can you help me to understand this? – munna_695 Apr 27 '17 at 05:48
0

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>
Terry
  • 63,248
  • 15
  • 96
  • 118