473,320 Members | 2,083 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

preload image does't with non cached images

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>
Jul 20 '05 #1
11 2471
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.

--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #2
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.
*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 20 '05 #3
michel reynard wrote:
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[i];
}
</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 <gw*****@agricoreunited.com>

* Client-side Javascript and Netscape 4 DOM Reference available at:
*
http://devedge.netscape.com/library/...ce/frames.html

* Internet Explorer DOM Reference available at:
*
http://msdn.microsoft.com/workshop/a...ence_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-deve...upgrade_2.html
Jul 20 '05 #4
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?
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #5
@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:st*********************@wanadoo.fr
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephanePOINTmoriaux/internet/
************************************************** ************
Jul 20 '05 #6
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/...m.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.

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 20 '05 #7
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.
--
--
Fabian
Visit my website often and for long periods!
http://www.lajzar.co.uk

Jul 20 '05 #8
@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/...m.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[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.mor...uc/add_img.htm

--
************************************************** ************
Stéphane MORIAUX : mailto:st*********************@wanadoo.fr
Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
http://perso.wanadoo.fr/stephanePOIN...iaux/internet/
************************************************** ************
Jul 20 '05 #9
Thank you but there is still the same problem.
If the image is like this one
http://www.wettercam24.ch/cgi-local/....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.
Jul 20 '05 #10
Michel wrote:
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
Jul 20 '05 #11
@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/....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 ?
--
************************************************** ************
Stéphane MORIAUX : mailto:st*********************@wanadoo.fr

Jul 20 '05 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Perttu Pulkkinen | last post by:
I use database to store images. So img-tags are like <img src="viewer.php?img_id=100"> Can I use javascript/php-combination to preload images of whole site after first page is loaded? Or does...
2
by: Wonko | last post by:
Here's my problem if anyone could be so kind to help me out. I assume it's quite easy for an experienced programmer but I'm not one of them :) I have a JavaScript code that: - displays multiple...
7
by: MALdito | last post by:
hi everybody let me say right from the start .. I´m not a coder ... "just" a designer! that said .. here is my question: I´m using dreamweaver´s built in preloader for a menu. it looks like...
1
by: Harod Ruthgar | last post by:
var image = new Image(); image.src="pathToTheFile"; The above code is called 25 times (with different pathToTheFile) within a loop. I manually checked the cache directory and not all images...
2
by: jmhill | last post by:
Has anyone else had this issue? Basically, the preload of images for a rollover effect for the navigation is really really slow when using IE 6.0 but when i view the site using Netscape, it's fast...
2
by: Albert Spencil | last post by:
I have tried several preload scripts found here; plus, some of my own. The only thing that works is the unsophisticated loading of those tiny images. The download consist of 100+ images amounting...
4
by: Jake | last post by:
Does cookieless session state (with the sessionid embedded into the url) interfere with the browser's retrieval of cached images from one session to the next? Does the sessionid embedded into the...
2
by: CK | last post by:
Words to the wise, Henry <rcornford@raindrop.co.ukwrote: Sorry for the delay, was overly swamped and only managed to be able to free some time last week to work on this. Yes, that was the...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.