My goal is to display a div background using the fadein() effect once it has finished loading.
After some research, I found a helpful topic on Stack Overflow which works well with an <img> tag.
I want to achieve the same effect with the CSS background property of a div. Here is the code I have been trying to implement:
HTML
<div id="some_target"></div>
CSS
#some_target {
position: absolute;
width: 100%; height: 100% ;
}
jQuery
$(document).ready(function() {
var newImage = "url(http://vanusasousa.com.br/sicom/img/background2.jpg)"; //Image name
$("#some_target").hide() //Hide it
.one('load', function() { //Set something to run when it finishes loading
$(this).fadeIn(); //Fade it in when loaded
})
.css('background', newImage) //Set the background image
.each(function() {
//Cache fix for browsers that don't trigger .load()
if(this.complete) $(this).trigger('load');
});
});
Although the code seems correct, it's not working as expected. You can view the issue on jsFiddle where I've been testing it out.
If anyone knows what I might be doing wrong, any help would be appreciated.
Thank you to everyone.