Replace CSS background when image is loaded with AJAX

Question

I have a placeholder background image that i want to replace after its loaded.

$.get("BIG-IMAGE-URL").done(function(data){

    $('.MY-DIV-CLASS').css('background-image', 'url("BIG-IMAGE-URL")');

});

Does anyone know how to make a simple function like this?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You can load your big image with javascript, and set the CSS background in the load event handler.

var img = new Image();   // Create new img element
img.addEventListener('load', function() {
  // set background here
  $('.MY-DIV-CLASS').css('background-image', 'url("bigImage.png")');
}, false);
img.src = 'bigImage.png'; // Set source path

Source: MDN Using_images

Additionally, here is a similar solution using jQuery How can I check if a background image is loaded?

Replace CSS background when image is loaded with AJAX

Sign up