Способ исчезнуть в фоновом режиме на загрузке?
Так как каждый объект в JS ведет себя как - и обычно реализуется как - хеш-таблица, я просто иду с этим...
var hashSweetHashTable = {};
5 ответов
I haven't done this myself, but it might work.
You could, I guess, setup the background image and then mask it with a big old div that has a black background. Then play with opacity of this div to create the fade effect. This black div would have to cover the entire body.
I'm not sure if there is a way to have the background image fade in, but one way you could do it is using an absolutely positioned image with a negative z-index. You could then use jquery to fade in the image. This approach might be trickier if you need the background image to tile or repeat.
The HTML:
<body style="z-index: -2">
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;">
<!-- The rest of your HTML here -->
</body>
The jQuery:
$(window).load(function() {
$("#backgroundImage").fadeIn("slow");
});
Yep:
Don't give the body a background image. Then prepare an animated GIF with the fading effect. In Javascript:
document.onload = function () {
window.setTimeout (function () {
document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)";
}, 500);
};
In jQuery it would be
$(function () {
$('body').css ('backgroundImage', 'url(/path/...)');
});
If you don't want to do the animated GIF trick, but need support for JPEG or PNG, it get's nasty. You'll have to create a placeholder , position it to the right place and play with opacity. You also have to detect when the background image has loaded, so that you don't get silly jumps on slow connections. A non-working example:
var x = new Image();
x.onload = function () {
/*
create div here and set it's background image to
the same value as 'src' in the next line.
Then, set div.style.opacity = 0; (best, when the
div is created) and let it fade in (with jQuery
or window.setInterval).
*/ };
x.src = "/path/to/img.jpg";
Cheers,
i see this link ,
http://fragged.org/dev/changing-and-fading-body-background-image.php
the idea is :
apply your background to a div that's assigned a low z-index, absolute positioning and a background (think of it as a reverse / back modal). then produce your content into another layer on top of it with a transparent background....
you can now reference the bottom layer by id and change the opacity.
all it needs is a stack / array of background mages to apply as a property to the layer...
Почему бы не использовать готовый скрипт: этот делает фоновое изображение плавным при загрузке страницы.
Он также подгоняет изображение под размеры окна, но это можно отключить, если в этом нет необходимости.