By alexiscott on

Hi,

I am using some Jquery for image effects.
I want to preload the images. I am aware how I can do that in Jquery. but I want to pass the images in with paths using php.

What is the best way to do this?

Thanks,
arcX

⋅ Categories: Drupal 4.7.x

Comments

alynner’s picture

alynner commented

Its not jquery, but here is an adapted script from macromedia. I made it work for my site by putting this in the area for loading rollover images for my primary links:

  <script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
<? foreach ($primary_links as $pre) {
	$preload .= "'".$base_path."themes/nwd/images/links/".strtolower($pre['title'])."_2.png','".$base_path."themes/nwd/images/links/footer/".strtolower($pre['title'])."_02.png',";
}
$preload = substr($preload,0,-1);
print "<script type=\"text/javascript\">
MM_preloadImages($preload);
</script>	";
?>
</script>

It doesn't have to go onload or anything, so that is nice, but I find that it does take a few seconds to load. I suppose you could put it somewhere at the bottom of the page so it loads them after the rest of the page has loaded.
hope this helps
-alynner

alexiscott’s picture

alexiscott commented

Thanks for that!

In the end I went with something like this:

/* Plain and simple. */
.preload
{
background-image:url(hover.png);
}

...

CSS seemed to me more accessible, both for me and the users, as a solution than using Javascript

kjpil’s picture

kjpil commented

Hi, could I please get som more details about how this works and what I need to change in the code to make it work for the images at my site? I need to use with nice menus and some other buttons on my site as well, got about 30 images that need to preload, and I'm going to change them later, so would prefer something like preloading the imagedirectory. Dont understand enough to sort it out with these codesnippet.

Garrett Albright’s picture

Garrett Albright commented

Consider CSS sprites. With CSS sprites, a single image takes the place of two or more other images. That way, the "on" and "off" states of a rollover can be a single image, and CSS is used to display the desired part of the image instead of swapping it out with JavaScript. This requires less scripting, downloads faster, and eliminates the necessity for complex and annoying pre-loading.