[Javascript] Calling images only when needed.

Mon Feb 14 09:53:58 CST 2005

At 07:00 AM 2/14/2005, Richard wrote:
>www.somestuff.batcave.net
>
>Suppose that I wind up with 600 plus images I want to show off.
>Is there a way to keep the thumbnails from downloading and causing a long
>wait before the menu falls back to the collapsed state?
>I don't see why I have to code in every cotton pickin image and force the
>visitor to accept the 600 thumbnails.

Richard,

If you use CSS to apply {display: none;} to an image (or an image's 
container) it will not download until you change this to {display: block;} 
or {display: inline;}.  Thus you can initialize your page with all your 
thumbnails suppressed from display, and evoke them only when the 
corresponding menu picks are selected.

You can use the same technique for your menu so you don't have to wait for 
your page to load before the menu collapses.

The main problem with this kind of technique is that, if someone has 
JavaScript turned off in their browser, or their browser doesn't support 
scripting or the DOM you're using, they won't be able to use your menu or 
display the thumbnails.

The way I usually handle this problem is to create two parallel 
systems.  In the absence of JavaScript, the system works with server-side 
scripting; when JavaScript is enabled, it behaves identically but faster, 
without requiring trips back to the server.

When JavaScript is enabled, all it has to do is set the body.className = 
this.id when an item is clicked:
         <body class="item2">

To support a submenu system like yours, just manage two class names for the 
body:
         <body class="item2 item2.1">

In the absence of JavaScript, the menu will work because it's composed of 
links to the same page with different querystring arguments which a 
server-side script (PHP or ASP) uses to set the body class each time the 
page downloads.  Here's how the menu looks after "Vehicles" is selected 
from the menu:

         <body class="Vehicles">
         ...
         <ul>
            <li id="Vehicles"><a href="?menu=Vehicles">Vehicles</a>
               <ul>
                  <li id="Planes"><a href="?menu=Planes">Planes</a>
                  <li id="Trains"><a href="?menu=Trains">Trains</a>
                  ...
               </ul>
            <li id="item2"><a href="?menu=item2">item2</a>
               <ul>
                  <li id="item2.1"><a href="?menu=item2.1">item2.1</a>
                  <li id="item2.2"><a href="?menu=item2.2">item2.2</a>
                  ...
               </ul>
            </li>
            ...
         </ul>

Then your CSS can look like this:

         /* suppress all submenus */
         ul ul
         {
            display: none;
         }

         /* display the currently-selected submenu */
         body.Vehicles li#Vehicles ul,
         body.item2 li#item2 ul,
         body.item3 li#item3 ul
         {
                 display: block;
         }

The same technique can be used to display the image associated with each 
menu leaf:

         <body class="Vehicles Trains">
         ...
         <div class="thumbnail" id="Planes"><img href="Planes.jpg" /></div>
         <div class="thumbnail" id="Trains"><img href="Trains.jpg" /></div>
CSS:
         /* suppress all images */
         div.thumbnail
         {
            display: none;
         }

         /* display the currently-selected submenu */
         body.Planes div#Planes,
         body.Trains div#Trains,
         body.Automobiles div#Automobiles
         {
                 display: block;
         }

Muliple class names in the body can be managed easily, deciding that the 
first class is the first menu level, the next class is the second menu 
level, etc:

         var sBodyClass = new String(body.className);
         var aBodyClass = sBodyClass.split(" ");
then:
         aBodyClass[0] == 1st-level menu
         aBodyClass[1] == 2nd-level menu

You can replace specific menu level classes as the user works the menu.

Paul 