Fade in Background Image Only after Loading Fully

Question

I am trying to a load a big image background... Even though I am using .load the the image just loads normally and not having a smooth fadeIn after loading. Here's my code.

$(function(){
    var bgimage = new Image();      
    bgimage.src="http://placeimg.com/760/460/tech";       

    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(slow);                  
    });
});

Demo : http://jsfiddle.net/nud2bfb1/

What am I doing wrong?

Answer 1

Try this : You need to hide image first and then use fadeIn(), also fadeIn(slow) must be fadeIn("slow") i.e. slow in quotes

$(function(){
    var bgimage = new Image();      
    bgimage.src="http://placeimg.com/760/460/tech";       
    $(".feature").hide();     
    $(bgimage).load(function(){
        $(".feature").css("background-image","url("+$(this).attr("src")+")").fadeIn(2000); 
     }); 
});

DEMO

Answer 2

You cannot detect load on background images. You cannot transition / animate background images.

What you and other answers are trying to do is to fade/animate the entire div after loading an img element. This doesn't work every time flawlessly. Because, this IMO is disruptive because either the entire div (along with its content) has to be kept hidden while the image is loading, or you hide the div and then attempt to fade it. This will give you flicker as the div is hidden abruptly before the fade.

What I would suggest is that you use a dummy img element as you are already doing, but position it absolute (in relation to div) with the same size and negative z-index. This way, the div and its content can be visible while the image is loading. Once loaded, you fade the dummy img in (behind the div), then assign the background-image and then remove the dummy img.

Demo: http://jsfiddle.net/abhitalks/q7cvn2nd/

See this snippet:

var $img = $("<img />");

$img.load(function() {
    $(this).fadeIn("slow", function() {
        $('.feature').css('background-image', 'url(http://lorempixel.com/240/240)');
        $(this).remove(); 
    });   
});

$img.addClass("dummy");
$img.attr('src', 'http://lorempixel.com/240/240');
$(".feature").append($img);

* {
    box-sizing: border-box;
}
.feature {
    position: relative;
    width: 240px; height: 240px;
    border: 1px solid gray;
    padding: 8px; color: #f00; 
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
img.dummy {
    top: 0; left: 0; bottom: 0; right: 0;
    width: 100%; height: 100%;
    position: absolute;
    z-index: -1;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="feature"><h1>This is some text.</h1></div>

Important: Do not forget to remove the dummy image.