preloading images

[joe_ob]

Hello there, does anyone know of a simple way to preload images? This should mean that the second image begins loading as soon as the first is done?

I'm useless at code and have spent a while trying to figure this out, but I do feel as though it will help the usability of pixelpost.

Any ideas welcome.

Cheers,

Joe

[Dkozikowski]

This is not a bad idea.

I'll throw a quick addon together to grab the image name of the previous image.

[Dkozikowski]

Here it is: Simple Image Pre-loader (http://www.dwilkinsjr.com/public/pixelpost/myaddons/image_preload_v0.1.zip) v0.1

You can use this with whatever javascript pre-loading script you wish.

Use the new template tag, <PRELOAD_IMAGE_NAME> to grab the previous image name for pre-loading.

Here is a extremely simple javascript pre-loader example:


<script type="text/javascript">
if (document.images)
{
img1 = new Image();
img1.src = "images/<PRELOAD_IMAGE_NAME>";
}
</script>


Note, if the last image has been viewed, the addon will go back and use the first image name.
This may be useful if you have the wraparound image addon installed.

If you know what you're doing, feel free to modify the addon to your liking.

[jaywilliams]

It may be a good idea to add this to the bottom of the template, rather than the top.

That way the browser will load the current images first before trying to preload.

Also, by adding something like this to the header of your site will cause FireFox to preload when it is idle:

<link href="images/<PRELOAD_IMAGE_NAME>" rel="prefetch" />

[Dkozikowski]

Good idea Jay.

You can use the addon to do all of that. All the addon does is fetch the previous image name. Use the tag in anything you want :)

[joe_ob]

Sounds good, but I'm not clear. First do I install the add on, and then do I add the text from Jay (if so, what page do I add it to?)?

Thanks for the help so far, I hope others find it helpful too.

[Dkozikowski]

Yes, the addon is necessary to retrieve the image name to be preloaded.

So install the addon and use whatever pre-load script you wish.

My example pre-loads the next ("previous") image as the page loads so essentially, you are loading 2 photos instead of 1. This will slow down your page loading times for visitors with slow connections. It should not bother high-speed users though.

What Jay is showing you is an alternative method that can be used to load your images in the background after the page has loaded.

This is nice but the code he posted above only works with some mozzila based browsers as far as i know.

[Ariel]

Works like a charm in both FF2 and IE7. Thank you!

[irishblue]

Here it is: Simple Image Pre-loader (http://www.dwilkinsjr.com/public/pixelpost/myaddons/image_preload_v0.1.zip) v0.1

You can use this with whatever javascript pre-loading script you wish.

Use the new template tag, <PRELOAD_IMAGE_NAME> to grab the previous image name for pre-loading.

Here is a extremely simple javascript pre-loader example:


<script type="text/javascript">
if (document.images)
{
img1 = new Image();
img1.src = "images/<PRELOAD_IMAGE_NAME>";
}
</script>


Note, if the last image has been viewed, the addon will go back and use the first image name.
This may be useful if you have the wraparound image addon installed.

If you know what you're doing, feel free to modify the addon to your liking.

Is there a way to make the preload work with the Secret add-on at:
http://www.pixelpost.org/forum/showthread.php?t=5821&highlight=secret ?
My secret images seem to load really slowly even after the mouse has moved over the trigger image.

If my images have a standard file naming such as image1-before.jpg and image1-after.jpg, is it possible to make it work? Sorry not really familiar to scripting to modify it myself.

[Dkozikowski]

I am not familiar with the secret image addon but yes, it can be done.

When I'm not too busy i'll see what I can do.

[Laprodo]

That solution seems to be smarter, it doesn't require extra sql-statemants and reuse existing variables of pixelpost:
http://www.pixelpost.org/forum/showthread.php?t=717

[irishblue]

I just figured how to preload for those using the secret addon too. I know nuts about scripting but it seems to work hehe

<script type="text/javascript">
if (document.images)
{
img1 = new Image();
img1.src = "images/<PRELOAD_IMAGE_NAME>";
img1.src = "images/o_<PRELOAD_IMAGE_NAME>";
}
</script>
assuming "o" is the prefix of your secret images (which is the default from that addon, unless you changed it)

[irishblue]

any idea how I can preload the secret image for the very first image?
since the <PRELOAD_IMAGE_NAME> only loads the "previous" image.

[austriaka]

You are on the right track, but you don't need the <PRELOAD_IMAGE_NAME>.
Just use
<script type="text/javascript">
if (document.images)
{
img1 = new Image();
img1.src = "images/o_<IMAGE_NAME>";
}
</script>

You don't need the Image Pre-Loader Addon since you are only interested in the actual images name (<IMAGE_NAME>)

[irishblue]

thank you very much for the quick reply!
it works like a charm now!
much appreciated :D

[austriaka]

n/p
I use it in my blog too now so I have to thank you for the idea