JS PopItMenu Preload Images

**thomasbill** · 10-18-2009, 11:51 AM

1) Script Title: pop it menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/popit.htm

3) Describe problem:

I am using images not text, however the images only load after i have moused over the link to trigger the drop down.

At first I was using images placed in the drop e.g: <img
But that was worse, this made the images load EVERYTIME the drop down was triggered.

I later changed it so that the images are background images inisde the dropdown, this is slightly better in that the images load the first time you trigger the drop down. HOWEVER there is a delay in loading time after drop down is triggered.

IS THERE ANYWAY TO PRELOAD THE IMAGES BEFORE THE DROPDOWN IS TRIGGERED?

I have tried CSS preloading and JS preloading but i could not get it to work, it still loads the images only after the dropdown is triggered

**jscheuer1** · 10-18-2009, 04:24 PM

That doesn't sound right. If you preload an image, it should be available right away as the src attribute of injected HTML. So your first method, even without preloading should have only have loaded the image once. With backgrounds it's generally the same, except that IE may sometimes reload backgrounds that result from injected HTML.

But let's go with what you say is (sort of) working for you, the background images.

In order to do so though, it would be helpful to know how you are getting the background images into the pop menu:

Please post a link to the page on your site that contains the problematic code so we can check it out.

However, even without knowing that, here is what I would suggest, use class.

So for instance, in your script code:

Code:

 . . . MenuWidth="150px" //set default menu width.

var linkset=new Array()
//SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

linkset[0]='<a class="lbg1" href="http://dynamicdrive.com">Dynamic Drive</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a class="lbg2" href="http://www.jav . . .

Continue adding classes to each item as required. Then in your style section you could have something like:

Code:

.lbg1 {
 display: block;
 background: url(whatever.gif);
}

.lbg2 {
 display: block;
 background: url(whateverother.gif);
}

etc. for however many classes you've used. Then to preload these images, you can have a section in the body, just after the opening body tag:

Code:

<body>
<div style="position: absolute; left: -3000px; top: - 3000px; visibility: hidden;">
<a class="lbj1">dummy</a><a class="lbj2">dummy</a>
</div>

Put a dummy link (or any element really) in there for each of the classes you've used. It will not be seen but will preload the background images.

Now, preloading takes just as long as loading, so if a particular image hasn't completed its preload before it is required, it will still need to load on demand. So it is a good idea to optimize your images for smallest possible byte size.

**thomasbill** · 10-20-2009, 04:04 PM

Thanks for the reply.....

I am already applying background images in a simalar way to as you have pointed out....

with classes specified for the links in the js...

Code:

linkset[0]+='<a href="http://www.nuttifox.com" class="tomsfox" title="Web Design and Development">NuttiFox Web Design</a>'
linkset[0]+='<a href="http://www.nuttipress.com" class="tomspress" title="Quality Printing">NuttiPress Print Services></a>'
linkset[0]+='<a href="http://www.nuttihost.com" class="tomshost" title="Fast and Secure Web Hosting">NuttiHost Web Hosting</a>'

and then the css looks like...

Code:

.tomsfox { background: url('http://www.nuttifox.com/images6/toms-menu/nuttifox-small.png') no-repeat; background-position:10px; }
.tomshost { background: url('http://www.nuttifox.com/images6/toms-menu/nuttihost-small.png')no-repeat;  background-position: 10px; }
.tomspress { background: url('http://www.nuttifox.com/images6/toms-menu/nuttipress-small.png')no-repeat;  background-position: 10px; }
.toms-p { color: #b0b0b0; font-size: 10px; border-bottom: 1px dotted #999; }


#popitmenu{
position: absolute;
background: #232323;
border:1px solid black;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100;
visibility: hidden;
text-align: center;
padding:6px;
}

#popitmenu a{
text-decoration: none;
color: black;
display: block;
border-top: 1px none #232323;
border-bottom: 1px none #232323;
width:200px;
height: 75px;
text-indent:-9000px;
}

#popitmenu a:hover{ /*hover background color*/
border-top: 1px solid #4b4842; border-bottom: 1px solid #4b4842; background-color: #20201f;}

I already tried preloading the images in the way you have described... (with inline style making them indent off of the page and set to viability hidden... I didn't put dummy links in though - The end result of which was that the background images loaded with the page but after the popitmenu was triggered with mouse over the background image loaded again!

- and a new problem has developed (or i have just discovered)

In IE6 the top image shows e.g the with this class...

Code:

.tomsfox { background: url('http://www.nuttifox.com/images6/toms-menu/nuttifox-small.png') no-repeat; background-position:10px; }

However, the 2 images under that dont even show.... fine in all other browsers :S :S

**jscheuer1** · 10-20-2009, 05:37 PM

Please post a link to the page on your site that contains the problematic code so we can check it out.

**thomasbill** · 10-21-2009, 03:17 AM

ok you can see what I mean through IE6 at my site in PM

**jscheuer1** · 10-21-2009, 03:39 AM

There could be other problems but IE 6 and less don't display alpha channel transparency images properly without the application of the AlphaImageLoader Filter:

http://msdn.microsoft.com/en-us/libr...69(VS.85).aspx

There are various 'plug in' type solutions to this problem. Perhaps the best and best known is iepngfix:

http://www.twinhelix.com/css/iepngfix/

But none are perfect.

BTW, I don't see any issues with images not preloading on that page.

**thomasbill** · 10-21-2009, 03:54 AM

that makes sense - i have seen the png fix script before but never had to use it until now.

Will try it, thanks.

**jscheuer1** · 10-21-2009, 04:02 AM

Well, I should have mentioned that I saw:

Code:

<!--[if IE 6]>
<script type='text/javascript' src='js/dd_belated_png.js'></script>
<script>DD_belatedPNG.fix('.ie6fix');</script>
<![endif]-->

on the page, which looks like an attempt to deal with the the problem. But I figured you knew your own code and knew you had that. If you try out the solution I recommended (which may work better), you should probably get rid of the above one. The two are not likely to 'play well' together.