Display full page image after image is loaded

StackOverflow https://stackoverflow.com/questions/18120053

Question

How do I display a image only after it loads but the rest of the page shows normally? On each page I have something like this <html class"page-name"> and the css is as follows html.page-name { background: url(images/page-name.jpg) no-repeat center center fixed; background-size: cover; }

I tried to do the javascript as $(window).load(function(){ $('html').fadeIn(1500); });

but this obviously doesn't work because the hole page is blank until the image is loaded. I want the background to be black until the image is loaded and than replace it to the black background. I also tried $(window).load(function(){ $('html').addClass('page-title'); }); where page-title class has transition effect but also doesn't work.

How do I achieve this, having a black background and replace it with an image after it fully loads ?

Thank you.

Was it helpful?

Solution

Load image dynamically and then on its onload add it to the background

$(document).ready(function(){
    var img = new Image();
    img.onload = function(){
      // image  has been loaded
      $("html.page-name").css("background-image","url('"+image_url+"')");
    };
    img.src = image_url;
})

OTHER TIPS

jQuery:

// Wait for page load
$(function() {
  // apply background image class to body (fade over 500 milliseconds)
  $('body').addClass('page-title', 500);
});

CSS:

.page-title {
   background-image: url('/path_to/image.jpg');
 }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top