Hello,

I have a table with a large background image:

<table style='background-image: url(images/eagle_country_large.jpg); ..'>

The problem is that everything on the page loads except there is a big delay with the loading of the image. It's not like a regular image loading. Somehow it looks like the page is finished, then a delay, and then the background picture appears. It's even worse on a dialup connection.

I even tried it as a non-css attribute:

<table background='images/eagle_country_large.jpg' ..>

Is there a php solution (or other...) that will make the page AND image load completely before rendering???

    Well this is a client side issue so the answer is no. There are ways you can fix this, firstly I suggest optimizing the image as much as possible try using PNG format that usually keeps quite a bit in and allows you to keep the filesize small, secondly another way is to use javascript to pre-load the image a quick google on Image Preloaders will give you examples on how to do so.

      Perhaps you could try using progressive JPEGs? This way, you'll at least see that the image is loading (even though it'll be liney/poor quality until its finished).

      EDIT: Adding on to planetsims' request, you could actually hide the table (or entire page, or any part of the page) using a CSS style ('display:none', 'visibility:hidden', etc.). Then, add an 'onLoad' to your <body> tag to change the CSS value once the entire page is loaded, like so:

      <body onLoad='document.getElementById('mytable').style.display = "block"'>

<table ... id='mytable'>
...
</table>

      You could probably even make a fake "splash" screen like so:

      <script type="text/javascript">
function loaded() {

document.getElementById('splash').style.display = "none";
document.getEelemntById('pageBody').style.display = "block";

}
</script>
<body onLoad='loaded()'>
<div id="splash"><p>Please wait while the page loads...</div>

<div id="pageBody" style="display: none">
(entire page contents here)
</div>
</body>

        Thank you very much planetism and bradgrafelman!

        First, I tried the PNG format and I couldn't get the file size low enough without trading off quality, so JPG it will remain.

        I tried progressive JPG but that doesn't make a difference when the image is a background, at least not for my tests.

        I couldn't find a pre-loader script that was free... that is until bradgrafelman posted. So I'm definitely going to try it, just as soon as I get some "crud" out of my department. ("crud" = "anything I don't like doing!")

        Thanks again. 🙂

          Sorry for the delay getting back to you. I tried your code and all I got was a blank screen (i.e. the table didn't load). Here is the code that I used:

          <style><!--
#mytable {display: none;}
--></style>
</head>
<body onLoad='document.getElementById('mytable').style.display =" block"'>
<table id='mytable' style='... background-image: url(images/eagle_country_large.jpg);'>

          BTW I am extremely fascinated by this, particularly the getElementById business. What is that? Javascript? Document Object Model? I sure would like to learn more about it.

          Edit: I have two other questions (I thought I would write them down before I forget):

          1. If this were within a PHP print "" statement, how do you deal with the quotes? (I assume those double quotes would take you OUT of the print, and then cause a parse error)

          2. Is it possible to have a message that says "picture loading"... (wait a minute I think you had a solution for that, I wll go back and re-read)

            Sorry - I'm at a college in Missouri, so I'm afraid I can't fully answer your post right now, merely guide you in the proper direction.

            Sorry for the delay getting back to you. I tried your code and all I got was a blank screen (i.e. the table didn't load).

            and

            3. If this were within a PHP print "" statement, how do you deal with the quotes? (I assume those double quotes would take you OUT of the print, and then cause a parse error)

            I grouped these quotes together because they have the same solution: escape the delimiter. To see what I mean, take a look at your onLoad section of the HTML code you posted:

            onLoad='document.getElementById([COLOR=red][b]'[/b][/COLOR]mytable[COLOR=red][b]'[/b][/COLOR]).style.display =" block"'

            Notice the single quotes I changed to red font? Since you used single quotes as the delimiter for your onLoad statement (by the way, HTML 4.0 compliancy says 'onLoad' should be lowercase 'onload' I do believe), so you'll have to do one of two things:

            1. Escape the quotes. In HTML/Javascript and PHP alike, you can escape quotes using a single backslash, like so:
            onload='alert("This is some \'quoted\' text!")'

            or

            echo "This is some \"quoted\" text.";

            If you use the delimiter inside the block of text (the string), you must escape it in this manner by preceding it with a single backslash.

            Alternatively, as in your HTML problem, you can simply switch to a different type of quote, like so:

            onLoad='document.getElementById("mytable").style.display =" block"'

            Either of the two methods should solve your HTML problem, I believe.

            BTW I am extremely fascinated by this, particularly the getElementById business. What is that? Javascript? Document Object Model? I sure would like to learn more about it.

            Well, yes. It's Javascript. I'm not exactly a good mentor (I know I wouldn't be ANY good teaching Javascript), so you'll have to either search around or ask around on a Javascript-oriented forum (or even try the Echo Lounge on these forums) for an in-depth explanation. Basically, I told Javascript first to go to the HTML document, look for an element (or HTML tag, like <table>) with the id of mytable, go to it's style, go to the display attribute of the style, and change it.

            4. Is it possible to have a message that says "picture loading"... (wait a minute I think you had a solution for that, I wll go back and re-read)

            Though it is untested, I believe you could implement some sort of a splash screen using the second code example in my previuos post. If it doesn't work on the first try, see if you can tweak it yourself, or post the code you used and I'll see if I can catch my mistake(s) the second time through.

              Thank you for your reply even though you are very busy right now with more important things. I will spend some time with your post (first of all, just getting the quotes within php print to work properly).

              I've heard rumours that Firefox has problems with <div> (the main browser I use). I wonder if this is part of the problem, because I tested it on IE (Mac) and the splash message did popup for a moment (we have high speed internet, so it didn't take long). I will test this again at home on my snail-internet.

              Thanks for your help and I wish you well with your studies! (BTW what is your major?) 🙂

                davidjam wrote:

                (BTW what is your major?) 🙂

                This school year I'll be a junior in HS - I'm just in an Intro camp (stay at the college's dorm rooms for a week, attend lectures, fun activities, etc. etc.), though I'll probably end up doing something like this:

                • Major: Computer Engineering
                • Minor: Computer Science
                • Minor: Spanish
                • Clubs: Most likely a robotics team that builds... robots! :p

                  I took computer science in grades 11 and 12. Prior to that I had picked up some programming on the old apple computers. I guess my one regret is that I didn't stick with the computer programming side of things. I chose visual arts instead. Well, now I am repenting of it. I hope you find and stick to what you love! (though I must say as for the "sticking to it" part -- don't be too "sticky" at least for until your into your early 20s, that is when you really start becoming aware of what you want to do. heck wait a little longer and be really sure! you got loads of time!) 🙂

                    Write a Reply...