Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Preloading pictures

    Hi!
    I preload picture with code

    Code:
    function ShowPic(picture){
        var tempImg = new Image();
        tempImg.src = picture
        .....
    }
    Is there a way how to find when the picture is fully load, e.g. his attributes are accessible.
    Thank you.
    Honza

  • #2
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can try: tempImg.onload or tempImg.complete

  • #3
    New Coder
    Join Date
    Nov 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Both work perfectly for me.
    Thank you very much Willy.

    Now I also see that there is one danger. Not to wait for eternity, if given picture is not on a server. But it should not be a problem to write a proper code.

    Honza

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Honza
    Now I also see that there is one danger. Not to wait for eternity, if given picture is not on a server. But it should not be a problem to write a proper code.
    tempImg.onerror

  • #5
    New Coder
    Join Date
    Nov 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for tempImg.onerror. And last question, if I can.
    tempImg.onload is better for me (at least at 7:16). But it "fires" only once. Can this event be "reseted" to work if the function ShowPic is called repeatedly?
    Honza

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Honza
    Thanks for tempImg.onerror. And last question, if I can.
    tempImg.onload is better for me (at least at 7:16). But it "fires" only once. Can this event be "reseted" to work if the function ShowPic is called repeatedly?
    Honza
    I've had problems with that before myself.... And I have found that the problem with repeatedly calling the image once the onload was called the first time is caused by the browser caching the image and it believes the image is already loaded so the onload is never called again (switching from image to image cancels this behavior)....

    What I have done in the past to work around this problem is to append a querry and number to the image source... This fools the browser into believing a new image is being loaded...

    IE: tempImg.src = picture+'?'+new Date().getUTCSeconds();

    .....Willy

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    BTW: Here is an example of how I use both the onload and querry appending....
    (there's also some postloading and preloading in there but I'm not sure of its effectiveness after I added the querry appending)....

    Code:
    <html>
    <head>
    <title>:::...P2 PHOTOGRAPHIC...:::</title>
    <BASE HREF="http://www.p2photographic.com/fashion/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link src="styles/style.css">
    <style type="text/css">
     <!--
      img        { border:none;
      }
      img.thumbs { margin: 2px;
                   cursor: pointer;
      }
      img.popup  { width:  319px;
                   height: 306px;
                   cursor: pointer;
      }
     -->
    </style>
    <script type="text/javascript">
     <!--//
      function display(image) { 
       var num = (/\d+(?=\.)/.exec(image.src));
       document.images['popup'].src = '/images/midsize/f'+num+'.jpg';
      } 
    
      function popUp(image){
       var num = (/\d+(?=\.)/.exec(image.src));
       var pop = new Image();
           pop.src = '/images/final/fash'+num+'.jpg?'+new Date().getUTCSeconds();
           pop.onerror = function(){ alert('This image has failed to load!') }
           pop.onload  = function(){
            var features  = 'top='+Math.round((screen.height - pop.height) / 2)+',';
                features += 'left='+Math.round((screen.width - pop.width) / 2)+',';
                features += 'width='+pop.width+',';
                features += 'height='+pop.height;
            var popWindow = window.open('','popup',features);
             with(popWindow.document){
                writeln('<html><head><title>Fashion Images</title></head>');
                writeln('<body onload="self.focus()" onblur="self.close()"');
                writeln('style="background-image:url('+pop.src+')">');
                writeln('<div style="position:absolute;bottom:3px;text-align:center">');
                writeln('<span style="font-size:12px;width:100%">');
                writeln('<a href="javascript:self.close()">Close</a>');
                writeln('</span></div></body></html>');
                close();
             }
           }
      }
     //-->
    </script>
    </head>
    
    <body>
    
     <div style="width:100%;text-align:center">
      <table cellpadding="0" cellspacing="0" border="0">
    
       <tr>
        <td class="midsize" rowspan="6" width="32">
          <img src="/images/photographic.gif"></td>
        <td valign="top" width="202">
          <img src="/images/thumb_top.gif" style="margin-bottom:4px"><br>
          <img src="/images/thumbs/f-thb01.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb02.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb03.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb04.gif" class="thumbs" onclick="display(this)"><br>
          <img src="/images/thumbs/f-thb05.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb06.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb07.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb08.gif" class="thumbs" onclick="display(this)"><br>
          <img src="/images/thumbs/f-thb09.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb10.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb11.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb12.gif" class="thumbs" onclick="display(this)"><br>
          <img src="/images/thumbs/f-thb13.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb14.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb15.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb16.gif" class="thumbs" onclick="display(this)"><br>
          <img src="/images/thumbs/f-thb17.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb18.gif" class="thumbs" onclick="display(this)">
          <img src="/images/thumbs/f-thb19.gif" class="thumbs" onclick="display(this)">
          <img src="/images/graybox.gif"        class="thumbs" onclick="display(this)"><br>
          <img src="/images/graybox.gif"        class="thumbs" onclick="display(this)">
          <img src="/images/graybox.gif"        class="thumbs" onclick="display(this)">
          <img src="/images/graybox.gif"        class="thumbs" onclick="display(this)">
          <img src="/images/graybox.gif"        class="thumbs" onclick="display(this)"></td>
    
        <td class="midsize" rowspan="6" width="319">
          <img src="/images/mid_bott.gif"><br>
          <img src="/images/midsize/f01.jpg" name="popup" class="popup" onclick="popUp(this)"><br>
          <img src="/images/mid_bott.gif"></td>
    
       </tr>
      </table>
     </div>
    </body>
    </html>
    .....Willy

    Edit: Oooops, this is not the script with the postloading/preloading so ignore those comments...
    Last edited by Willy Duitt; 11-16-2004 at 07:38 PM.

  • #8
    New Coder
    Join Date
    Nov 2004
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've tried it with a pictures on a server and it works. But now I'm in a doubt if it's good way to give up caching.
    Nevertheless you gave me a perfect answer to my question and I thank you for it.
    I will probably prefer using tempImg.complete repeatable by means of setTimeout. Must think about it more.
    Honza


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •