preload image does't with non cached images

Discussion in 'Javascript' started by Michel, Dec 10, 2003.

  1. Michel

    Michel Guest

    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>
     
    Michel, Dec 10, 2003
    #1
    1. Advertising

  2. Michel

    Fabian Guest

    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
     
    Fabian, Dec 10, 2003
    #2
    1. Advertising

  3. 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!
     
    michel reynard, Dec 10, 2003
    #3
  4. Michel

    Grant Wagner Guest

    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;
    }
    </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 <>

    * 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
     
    Grant Wagner, Dec 10, 2003
    #4
  5. Michel

    Fabian Guest

    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
     
    Fabian, Dec 10, 2003
    #5
  6. Michel

    @SM Guest

    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:
    Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
    http://perso.wanadoo.fr/stephanePOINTmoriaux/internet/
    **************************************************************
     
    @SM, Dec 11, 2003
    #6
  7. 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.

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    michel reynard, Dec 11, 2003
    #7
  8. Michel

    Fabian Guest

    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
     
    Fabian, Dec 11, 2003
    #8
  9. Michel

    @SM Guest

    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:
    Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
    http://perso.wanadoo.fr/stephanePOINT_TO_WRITEmoriaux/internet/
    **************************************************************
     
    @SM, Dec 12, 2003
    #9
  10. Michel

    Michel Guest

    Michel, Dec 15, 2003
    #10
  11. 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
     
    Thomas 'PointedEars' Lahn, Dec 15, 2003
    #11
  12. Michel

    @SM Guest

    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 ?


    --
    **************************************************************
    Stéphane MORIAUX : mailto:
     
    @SM, Dec 15, 2003
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Craig G
    Replies:
    0
    Views:
    393
    Craig G
    Mar 7, 2005
  2. Morris

    preload images

    Morris, Nov 12, 2003, in forum: HTML
    Replies:
    5
    Views:
    608
    Beauregard T. Shagnasty
    Nov 14, 2003
  3. ks
    Replies:
    1
    Views:
    378
    Mark Rae
    Aug 5, 2006
  4. shapper
    Replies:
    4
    Views:
    4,062
    Laurent Bugnion
    Nov 25, 2006
  5. Harod Ruthgar

    Image preload: Not all images are cached

    Harod Ruthgar, Jan 22, 2004, in forum: Javascript
    Replies:
    1
    Views:
    105
    Erwin Moller
    Jan 22, 2004
Loading...

Share This Page