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???
css background images and onload
Moderator: General Moderators
- the_last_tamurai
- Forum Commoner
- Posts: 87
- Joined: Wed Feb 28, 2007 8:24 am
- Location: cairo
- Contact:
- tecktalkcm0391
- DevNet Resident
- Posts: 1030
- Joined: Fri May 26, 2006 9:25 am
- Location: Florida
Re: css background images and onload
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.
- the_last_tamurai
- Forum Commoner
- Posts: 87
- Joined: Wed Feb 28, 2007 8:24 am
- Location: cairo
- Contact:
Re: css background images and onload
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 ???
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 ???
- tecktalkcm0391
- DevNet Resident
- Posts: 1030
- Joined: Fri May 26, 2006 9:25 am
- Location: Florida
Re: css background images and onload
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.
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);
- the_last_tamurai
- Forum Commoner
- Posts: 87
- Joined: Wed Feb 28, 2007 8:24 am
- Location: cairo
- Contact:
Re: css background images and onload
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
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
- tecktalkcm0391
- DevNet Resident
- Posts: 1030
- Joined: Fri May 26, 2006 9:25 am
- Location: Florida
Re: css background images and onload
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>