This is the first time I am using jQuery. I am loading a large background image and when it is loaded I am fading it in over three seconds. This script works on Firefox and Chrome but not in IE (of course!). Is there any fail safe way of making it magically work in IE and is there some prettier way of writing it?
<div class="bgImage" />
$(document).ready(function () {
// add bg image and fade
var _image = new Image();
_image.id = 'newImageId';
_image.src = "./css/background.jpg";
$(_image).load(function () {
$('div.bgImage').css('background-image', 'url(./css/background.jpg)');
$('div.bgImage').fadeTo(3000, 1);
});
});
use
$('div.bgImage').animate({ opacity: 1 }, { duration: 3000 });
assuming you are starting of with style="opacity: 0;"
HTML
<body>
<div class="bgImage"></div>
...
</body>
CSS
.bgImage {
position: fixed;
top: 0; left: 0;
right: 0; bottom: 0;
z-index: 1;
display: none;
}
Javascript
$(function() {
var src = '../css/background.jpg';
var ele = $('.bgImage');
var img = $('<img>', {
src: src
}).hide().appendTo(ele).load(function() {
$(this).remove();
ele.css('background-image', 'url('+src+')').fadeIn(3000);
});
});
for this you dont need to write that many lines of code this simple code will work for u...
$(document).load(function () {
$('div.bgImage').css('background-image', 'url(./css/background.jpg)');
$(document).ready(function () {
$('div.bgImage').fadeIn(3000);
});
});