Trigger function after background-image is loaded

Question

I am using Jimdo and have a given div (containing 3 sub-divs, I think this is my general problem, but I am not sure) I found with the browser:

<div class="jtpl-background-area jqbga-container jqbga-web--image" background-area="" style="background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=767x/path/s4354a59fbfee63e4/backgroundarea/ibb91266a7f033fa3/version/1529172695/image.jpg');background-position: 54.0833% 41.0025%;"></div>

How do I get a function triggered after the background-image of this is loaded?

I've already spent hours into this, tried tons of ways I found here or tools like waitforimages - still without success. What is going on with Jimdo / this div? How do I get something triggered after the background-image is loaded?

var src = $('.jtpl-background-area').css('background-image');
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');

var img = new Image();
img.onload = function() {
$('.jtpl-background-area').css('-webkit-animation', 'fadein 4s');
}
img.src = url;
if (img.complete) img.onload();

does not work.

$('.jtpl-background-area').waitForImages(true).done(function() {
$('.jtpl-background-area').css('-webkit-animation', 'fadein 4s');
});

does not work (waitforimages-script is included correct and opacity of .jtpl-background-area is set to 0 in css).

Any ideas?

 $(window).on('load', function() {
    $(".jtpl-background-area").css('-webkit-animation', 'fadein 4s');
 });

causes backgrounds often popping up too late. Page is displayed while pictures are still not ready/fully loaded.

-

Edit:

Regarding Scott Marcus and the answer here by 'adeneo' (Wait for background images in CSS to be fully loaded):

  $(window).on('load', function() {
   $(".jtpl-background-area jqbga-container jqbga-web- 
   image").ready(function() {
  $(".jtpl-background-area").velocity({ opacity: 1 },{ duration: 3000});
   })
  });

This here "works" - but my bg-images popping up too late. But why does nothing happen if I exchange this with

var src = $(".jtpl-background-area jqbga-container jqbga-web-image");
var url = src.match(/\((.*?)\)/)[1].replace(/('|")/g,'');
var img = new Image();
img.onload = function() {
$('.jtpl-background-area').velocity({ opacity: 1 },{ duration: 3000});
}
img.src = url;
if (img.complete) img.onload();

? Where is my mistake? Why doesnt this work and make my page stuck? It stays white and fails to load at all with this code.

Or in other words - how do I get

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();

to work with my (given and unchangeable)

<div class="jtpl-background-area jqbga-container jqbga-web--image" background-area="" style="background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=767x/path/s4354a59fbfee63e4/backgroundarea/ibb91266a7f033fa3/version/1529172695/image.jpg');background-position: 54.0833% 41.0025%;"></div>

exactly?

Answer 1

Instead of using a background image, you can use an img element and CSS positioning to layer it behind the content of its parent div. Then, you can use the load event of the img element.

document.querySelector(".jtpl-background-area").addEventListener("load", function(){
  console.log("Background loaded!");
  $(".hidden").fadeIn(4000);    // Fade the image in
});

/* by positioning the element absolutely and giving it a negative
   z-index, we put it behind any other items in the same space. */
.jtpl-background-area { position:absolute; z-index:-1; top:0; left:0; }

div div { background-color:rgba(255,255,255, .5); }

.hidden { display:none; } /* Image will start off hidden */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div>Some other div content</div>
  <!-- The image will be hidden at first -->
  <img class="hidden jtpl-background-area jqbga-container jqbga-web--image" background-area=""  src="http://imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/30741/STSCI-H-p1821a-m-1699x2000.png">
</div>

Answer 2

So here is what I came up with. We are basically creating an image, waiting for the file to load, then applying a style to the container.

Basically, we are making sure that no background-image is shown when the page loads by setting background:none !important; to the container.

We then create a new Image with JS, once that image's source is loaded, we apply a new class to the container, which sets the background image. You can add the animation and/or the opacity at your own discretion.

You may or may not have to fiddle around with the !important flag for your use case.

Is this what you had in mind?

$(document).ready(function() {
  var img = new Image();
  var container = $('.container');
  img.src = "https://placeimg.com/640/480/any";
  img.addEventListener('load', function() {
    container.addClass('hasBackgroundImage')
  });
});

.container {
  opacity: 0;
  background: none !important;
}

.hasBackgroundImage {
  opacity: 1;
  background-image: url('https://placeimg.com/640/480/any') !important;
  background-size: cover;
  height: 500px;
  width: 500px;
  transition: all ease-in-out 4s;
}

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

Answer 3

You might do it like this:
Script starts working before the document has been loaded.
It intercepts the inline style of your div before it's been applied.
Then uses Image object to load the image and sets the background-image onload.

var i = setInterval(function() {
  var div = document.querySelector('.jtpl-background-area');
  if (div) {
    clearInterval(i);
    var src = div.style.backgroundImage.replace(/^url\(['"]?|['"]?\)/ig, '');
    div.style.backgroundImage = 'none';
    var img = new Image();
    img.onload = function() {
      div.style.backgroundImage = 'url(' + src + ')';
      div.classList.add('loaded')
      img = null;
    }
    img.src = src;
  }
}, 10);

.jtpl-background-area {
  width: 330px;
  height: 200px;
  opacity: 0;
}

.loaded {
  transition: opacity 2s linear;
  opacity: 1;
}

<div class="jtpl-background-area jqbga-container jqbga-web--image" background-area="" style="background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=767x/path/s4354a59fbfee63e4/backgroundarea/ibb91266a7f033fa3/version/1529172695/image.jpg');background-position: 54.0833% 41.0025%;"></div>

Hope this helps.