WEB JavaScript and Preloading images wtf :crying:

Discussion in 'OT Technology' started by mobbarley, May 16, 2009.

  1. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    I'm working on an embedded system that I want to stream images from a webcam and having a world of problems.

    I originally started out using mime's multipart/x-mixed-replace to send the images to the browser and it worked well but IE has no support for it and it simply didnt work on slow connections.

    So i've changed to creating an image object and preloading it with JS but I cant get any onload functionality to work :crying: I want the page to preload a picture, display it, repeat with the next picture etc.


    This is a rough version of what I have so far and it works while the timer is quite high >1sec, but just below that random images don't get displayed. With small delays, say 0.1sec the images are loaded but never displayed.



    Code:
    <script>
    var image = new Image();
    var tmr = -1;
    
    function startTimer() {
      tmr = window.setTimeout("updateImage()",1000);
    }
    function stopTimer() {
      if (tmr != -1) {
        window.clearTimeout(tmr);
        tmr = -1;
      }
    }
    function updateImage() { 
      stopTimer();
      count++;
      image.onLoad=swapImage();
      image.src=nextimage; //generated from inputs + count for unique url
    }
    function swapImage() {
    	document.getElementById('IMG').src=image.src;
    	startTimer();
    }
    
    </script>
    
    
    <body onload="updateImage()">
    
     
  2. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    why can't i get it to SHOW the image, THEN load the next one (as soon as possible)

    :(
     
  3. fishbulb

    fishbulb Active Member

    Joined:
    Oct 29, 2001
    Messages:
    6,848
    Likes Received:
    4
    Location:
    md
    It may not be entirely practical if there are a ton of images, but have you tried putting all of the images in one image ( css sprites ), and adjust the css background position for a an empty div or other container that is the same size as one of your images?

    That way the all images are loaded in one file
     
  4. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    images are vga or qvga screens from a webcam, every time the src is changed it downloads a new image from the cam.
     
  5. Supergeek

    Supergeek New Member

    Joined:
    Jan 23, 2007
    Messages:
    1,855
    Likes Received:
    0
    Location:
    Colorado
    Are the filenames the same? Maybe the browser doesn't realize the file has changed (ie, file is cached.)

    You may have to add a random hash to the filenames that changes every time you want a new image.
     
  6. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    No, I ran into this with IE so I am passing a useless random number that increments with each image, as above.
     
  7. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    paypal $10 for solution.
     
  8. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    You should scrap and restart with jQuery. the document.ready() will save you a lot of problems.
     
  9. mobbarley

    mobbarley Active Member

    Joined:
    Mar 4, 2005
    Messages:
    9,256
    Likes Received:
    2
    Location:
    Sydney
    Can i get some more cliffs on how to use it? i've never use jQuery. :x:
     
  10. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,914
    Likes Received:
    8
    Location:
    Los Angeles
    Yeah, basically, the JavaScript will start executing as soon as the DOM tree is loaded, rather than waiting for the page to load. Very beneficial. You can still write your standard DOM within document ready if you wish, but you should definitely start using it's selector mechanism and chainability instead of the standard getElement functions.

    http://jquery.com/
    Code:
    $(document).ready(function() {
      // Your Javascriptage
    }
    
     

Share This Page