Page 1 of 1
css background images and onload
Posted: Mon Jun 23, 2008 12:35 pm
by the_last_tamurai
I have a problem with the home page of a site I develop now,
I put some images with css background-image , also I make a loading page which blank the page until it reload all images.
But , the actual page appear before all images with css background-image load !!!!
the loading page is not a page ,it just a div with big z-index ,
and the function in body.onload just make its display="none" and show the actual page???
Any help???
Re: css background images and onload
Posted: Mon Jun 23, 2008 7:42 pm
by tecktalkcm0391
I would try adding the code to hide the layer at the end of the page before the </body> tag. OnLoad may just be doing it as soon at it hides the <body> tag. I forgot how it works.
Re: css background images and onload
Posted: Tue Jun 24, 2008 2:29 am
by the_last_tamurai
thank you tecktalkcm0391 for your response
but it didn't work for me... I think the problem is that background images loaded after normal images in the page
although all images in the page should load in the cache and all of them will be injected in their elements (img tag or css style) as soon as it's downloaded
what I have exactly is :
- The page start loading and a div fill the screen with loading word while the page (not shown) on the background is loaded its content (images + data)
- The div disappear when the page (supposed ) successfully load its content, and the actual page is shown now.
- Problem : images with <img> tag is successfully loaded into their elements while elements with css background image NOT.and take a while to load.
Am I wrong in something ???
Re: css background images and onload
Posted: Tue Jun 24, 2008 7:42 am
by tecktalkcm0391
If you should provide the site and page your having this error, I could look at it better.
First make sure your image files are all compressed as saved in the smallest filesize while keeping the image looking good. If its a repeating background (or one that can be repeated) make the image only a few pixels wide, and just repeat the image. This will make it load much faster.
You could also try this javascript, but it in your head.
Code: Select all
var loaded = false
function preloader() {
if(loaded==false){
/* show the layer to "hide" the page */
image1 = new Image();
image1.src = "image file.jpg";
/* add more images like the above here */
} else {
loaded = true;
/* hide the layer to "show" the page */
}
}
setInterval(preloader(), 2000);
Re: css background images and onload
Posted: Wed Jun 25, 2008 5:59 am
by the_last_tamurai
Thanks
tecktalkcm0391 for the function. It's really nice
But where I can change the loaded variable to true....
I think its place in the function is
wrong.....I tried to put it in the last line in the
if block (just before else block)
but I don't know if the line is parsed after images loading or it doesn't wait ???!!!!
Thank you again man

Re: css background images and onload
Posted: Wed Jun 25, 2008 8:07 am
by tecktalkcm0391
I'm wasn't getting what you were saying, but then I realized that error, sorry i wrote it real fast, so .... here is a revised code... just edit the array of images you want loaded... and change the part about the layer to fix it to yours
Code: Select all
<html>
<head>
<title>Preload Image Page</title>
<script>
<!--
// Put the URLs of images that you want to preload below (as many as you want)
var yourImages = new Array("http://wallpapers.free-review.net/wallpapers/63/Tyrol,_Austria_-_Misty_Mountain_Village.jpg","http://wallpapers.free-review.net/wallpapers/63/Tyrol,_Austria_-_Misty_Mountain_Village.jpg")
if (document.images) {
var preImages = new Array(),currCount = 0
var loaded = new Array(),i,timerID
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
document.getElementById("apDiv1").style.visibility = 'hidden';
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// -->
</script>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:1;
background-color: #FFFFFF;
}
-->
</style>
</head>
<body onload="loadImages();">
<div id="apDiv1">
<div align="center">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>Loading...</p>
</div>
</div>