preload image does't with non cached images

[Michel]

Here is a litle script that preload images and show a thumbnail. Once
you get on the picture you see the real size

It worsk fine with normal picture but when the url has some parameters
like in the sample. The image is loaded again every time I go over the
thumbnail.
Is there a solution for havint just one load?


function AddImage(url) {
document.write("<a href=\"javascript:;\"
onMouseOver=\"document.myImg.src='" + url + "';\"><img src=\"" + url +
"\" width=\"80\" height=\"80\" border=\"1\"></a>");
}

that i call like this

AddImage('http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bild');</script>

 

[Fabian]

Michel hu kiteb:

Here is a litle script that preload images and show a thumbnail. Once
you get on the picture you see the real size

It worsk fine with normal picture but when the url has some parameters
like in the sample. The image is loaded again every time I go over the
thumbnail.
Is there a solution for havint just one load?

Isnt the whole point of a thumbnail that it is a small (in byte count,
not screen size) file? Your script defeats the point of such thumbnails.
Id hate to see the download time when you have several 'thumbnails' on
one page.

 

[michel reynard]

You're right but I only have the large images. The only things I'm
looking for is not to have to download the image twice.
The idea is to see all the pictures in the thumbnail and be able to
enlarge one to see the details without having to wait for the loading.

 

[Grant Wagner]

You're right but I only have the large images. The only things I'm
looking for is not to have to download the image twice.
The idea is to see all the pictures in the thumbnail and be able to
enlarge one to see the details without having to wait for the loading.

Then you're probably looking to pre-load the images. On the page that
loads *small* thumbnails, add the following code:

<script type="text/javascript">
var imageCacher = new Image();
var myImages = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ... ];
for (var i = 0; i < myImages.length; i++) {
imageCacher.src = myImages;
}
</script>

Now, as your *small* thumbnails load, the browser will be getting and
caching (subject to the rules of the server, any proxies and the browser's
own cache settings) each image you want. When the user clicks a thumbnail,
the image *may* already be loaded. If not, you've lost nothing because you
downloaded *small* thumbnails, if it is cached, it will appear almost
instantly.

It seems that you want to thumbnail all your large images in case the user
decides to click any single one of them. This seems like a really bad
idea. I don't want to wait for 1MB of images to download so I can enlarge
one more quickly.

--
| Grant Wagner <[email protected]>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

* Netscape 6/7 DOM Reference available at:
* http://www.mozilla.org/docs/dom/domref/
* Tips for upgrading JavaScript for Netscape 7 / Mozilla
* http://www.mozilla.org/docs/web-developer/upgrade_2.html

 

[Fabian]

michel reynard hu kiteb:

You're right but I only have the large images.

So make them. Even windows paintbrush has the ability to make thumbnail
size images from the original large file. Resources is not an excuse for
not having separate thumbnail files.

The only things I'm
looking for is not to have to download the image twice.

As opposed to downloading all of them at once, wasting download time for
those who dont wat to see all of them.

Suppose you have 30 humbnails, and lets suppose each file is 60k. Thats
1.8 meg already. Now suppose you make thumbnails, each 5k in size. Thats
150k, a far more palatable download time.

The idea is to see all the pictures in the thumbnail and be able to
enlarge one to see the details without having to wait for the loading.

May I suggest a loop that preloads the large images, while teh main file
only displays the smaller thumbnails?

 

[@SM]

Michel a ecrit :

Here is a litle script that preload images and show a thumbnail. Once
you get on the picture you see the real size

Because you call that a pre-loading ? ? ?

It worsk fine with normal picture but when the url has some parameters
like in the sample. The image is loaded again every time I go over the
thumbnail.
Is there a solution for havint just one load?

Use thumbnails as they have to do ==>
- thumbnail == small image.
- thumbnail != same big image

function AddImage(url) {
document.write("<a href=\"javascript:;\"
onMouseOver=\"document.myImg.src='" + url + "';\"><img src=\"" + url +
"\" width=\"80\" height=\"80\" border=\"1\"></a>");
}

that i call like this

AddImage('http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bild');</script>

On wich page this script will run ?
that I know where to not go ! ! ;-((

--
**************************************************************
Stéphane MORIAUX : mailto:[email protected]
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephanePOINTmoriaux/internet/
**************************************************************

 

[michel reynard]

ok one more time what I'd like to do is to preload the large images
since they come from webcams or other sources on the web and there are
no small images.
Furthermore this page is for my own use and since I enlarge all pictures
I don't need small images...

ok now has somebody a solution for the problem?
if I do
imageCacher = new Image();
imageCacher.src = "myImage.jpg";
and then on the onMouseOver i do the
myImg.scr = imageCacher.src;
It works fine with standard images but it doesn't if I have an image
created by a cgi called with one parameter like this one

http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bil
d

The cache mechanism must be overide since I'm calling a cgi with a
parameter.
Is there possible to copy the whole image instead of the adress?
Or does anybody have any other idea.

 

[Fabian]

michel reynard hu kiteb:

The cache mechanism must be overide

Overiding cache and preloading anything are mutually opposites as I
understand the terms. I expect they are opposites as the industry
defines the terms too.

 

[@SM]

michel reynard a ecrit :

ok one more time what I'd like to do is to preload the large images
this page is for my own use and since I enlarge all pictures
I don't need small images...

ok now has somebody a solution for the problem?
if I do
imageCacher = new Image();
imageCacher.src = "myImage.jpg";
and then on the onMouseOver i do the
myImg.scr = imageCacher.src;
It works fine with standard images but it doesn't if I have an image
created by a cgi called with one parameter like this one

http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bil
d

As I know anything about cgi ...
This code seemd to be correct

for the pre-declaration of images's path ==>

I = new Array();

if(document.images) {

// -- image to display in big view image ---
I[0] = new Image(); I[0].src = "http://server/site/folder/plein.gif";

// -- the other images to show in thumbnail ---
I[1] = new Image();
I[1].src =
"http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bild";
}


You can try to reslove your problen like that :
you call the src of image allready opened and displayed ==>

for(i=1;i<I.length;i++)
foo='<p><a href="javascript:void();" onMouseOver="document.myImg.src='+
'document.Pict'+i+'.src;"><img src="' + I.src +
'" width="80" height="80" border="0" name="Pict'+i+'"></a>';
foo += '<p><img src="'+I[0].src+'" width="'+larg+
'" height="'+haut+'" name="myImg" border="1">';
document.write(foo);

The cache mechanism must be overide since I'm calling a cgi with a
parameter.

if you call the image allready shown in thumbnail size,
instead calling its url-cgi,
I hope the navigator will be abble to find it in its cache ... ?

See a demo here :
http://perso.wanadoo.fr/stephane.moriaux/truc/add_img.htm

--
**************************************************************
Stéphane MORIAUX : mailto:[email protected]
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephanePOINT_TO_WRITEmoriaux/internet/
**************************************************************

 

[Michel]

Thank you but there is still the same problem.
If the image is like this one
http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bild
the image is reloaded each time you get on the picture with your mouse.
What I'm looking for is to copy the image and not just the url.

 

[Thomas 'PointedEars' Lahn]

What I'm looking for is to copy the image and not just the url.

I do not think you can do this with client-side JavaScript. By using
`new Image(...)' you only get a reference to a new DOM object.


PointedEars

 

[@SM]

Michel a ecrit :

Thank you but there is still the same problem.
If the image is like this one
http://www.wettercam24.ch/cgi-local/archiv/eggishorn/webcam.cgi?func=bild

Where it is ?
0:35:40 (Paris hour) almost clear ....
Not a long time to wait anyway (RTC 40000 bds)

and the urls for other webams ?