Trigger function after background-image is loaded

check if background image is loaded
background image onload
lazy load images example
lazy loading with blurred image effect
load images after page load
lazy load background images
jquery wait until background image loaded
lazy load images jquery

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?

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>

How can I check if a background image is loaded?, try this: $('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() { $(​this).remove(); // prevent memory leaks as @benweet  If the src is already set, then the event is firing in the cached case, before you even get the event handler bound. To fix this, you can loop through checking and triggering the event based off .complete, like this:

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>

After background image loaded jQuery Plugin, By default a "bg-loaded" class gets applied to the element(s) that the plugin is called on their background to load by simply including them in your jQuery call, for example: Example with different callback function var startTime = new Date​(). But you can also use the .load function on any other element. So if you have one particularly large image and you want to do something when that loads but the rest of your page loading code when the dom has loaded you could do: $(function(){ // Dom loaded code $('#largeImage').load({ // Image loaded code }); }); Also the jquery .load function is pretty much the same as a normal .onload.

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>

Trigger an event after specific background images have been loaded, Trigger an event after specific background images have been loaded. afterload.js​. ​$('<img>')​.attr('src',function(){. I would just put an image (even a blank transparent one) at the bottom of your DOM, it should be the last thing loaded by the browser, so the "onload" for that image can call your "highlight" function.

Lazy Loading Images, hasOwnProperty.call(obj, key); } ; function loadImage (el, fn) { var img = new Image() , src = el.getAttribute('data-src'); img.onload = function() { if  callback Function - function triggered after all images have been loaded Using a callback function is the same as binding it to the always event (see below).

Lazy Loading Images – The Complete Guide, After <img /> tags, background images are the most of the technique for lazy loading background images. We are using the Intersection Observer API method with a fallback to the event listeners. to the element triggering the load of the background image. How to detect when the images are loaded. It is simple to load images to the page using JavaScript. The process is to define the function to run when the image is

Learn How: Asynchronous Image Loading with JavaScript , img { width: 600px; height: 450px; background: url(loading.gif) 50% no-repeat; border: 1px solid black; Once the image has been downloaded this will trigger. downloadingImage.onload = function(){ image.src = this.src; };. In IE the js is triggered after the DOM structure fully loads and all images paint, including the background images called by the css. In Firefox, window.onload triggers after the DOM structure fully loads, after css styles are applied, after any images called in the XHTML are painted, but before painting the background images called in the CSS.

Comments
  • Have you looked at my answer? It is the solution you have been looking for.
  • I'll try it out
  • I added a fadeIn functionality as it looks like that's what you are trying to do.
  • Your 3rd part is not clear to me...unfortunately I can't edit or change my <div class="jtpl-background-area jqbga-container jqbga-web--image" background-area="" style="background-image: url('...');background-position: 54.0833% 41.0025%;"></div> as its given by Jimdo. I can only edit CSS and JS
  • @MichaelS82 What 3rd part? What can you not edit or change? This is how it has to be done.
  • Your 3rd code-snippet: <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="imgsrc.hubblesite.org/hvi/uploads/image_file/image_attachment/…"> </div>
  • @MichaelS82 You're going to have to change from using a background image to using a foreground image if you want to be able to trap the load event. But, you can then use CSS to position that foreground image so that it is in the background. That's what I'm showing in that HTML.
  • Thats the problem...I cant edit the html. My html-line in post 1 is given by Jimdo. and is not changeable. I could add html manually at the body-bottom maybe, but the original line will still be there, And if I remove my uploaded pictures completely I'll loose some functionality (changing Backgrounds on subpages for example). Seems I need a different solution...
  • Does not work actually. Tried it, added my picturelink, added the divclass at the bottom of my page - now I have a grey, large (background-colored) field under my content.
  • If I may, what is it you would like to achieve exactly?
  • My background-images are popping up too late. I need a simple way to ensure theyŕe completely loaded. I need a way that triggers a function when they are definately fully loaded. As written above - Opacity is 0 and if I do a "simple // $(window).on('load', function() { // $(".jtpl-background-area jqbga-container jqbga-web-image").ready(function() // { // $(".jtpl-background-area").velocity({ opacity: 1 },{ duration: 3000}); // }) //}); they are often not fully loaded and popping up too late.
  • It could be totally easy If I would get waitforImages to work...but It doesnt. Even "adeneo"'s answer here stackoverflow.com/questions/22788782/… does not work for me. But why?? Jimdo makes me sick. Scott Marcus seems to be right...in general it looks as if the page and "window on load" are just firing too early and the external images are still loading.