title: How do I preload flash video and images?
body: <p>I am working on a webapp that progresses through 'pages' via ajax. The content for each page is in an xml file, the app ajax's that xml file and builds the page from that, then spits it out to the browser. </p>
  
  <p>Some of these pages have video or large images which im trying to preload on the previous page. Below is the code I am using to check if the media is preloaded, but when I land on the page, it seems to be loading it again... any ideas?</p>
  
  <p>The video player is always present in the dom, when its not being used i hide it off screen.</p>
  
  <p>I assumed using the new Image() and giving it a source caches that image too right? </p>
  
  <pre><code>var l_image = new Image();
  //other stuff happens here
  
  switch(l_next.type) {
      case 'st_animation':
        if(l_next.video != undefined &amp;&amp; l_next.video != '') {
          l_videoSrc = String(l_next.video);
          _videoPlayer.loadVideo(l_videoSrc);
          delete l_next;
        }
        //give 2secs for the video to load atleast the first frame
        setTimeout(p_callback, 2000);
        break;
  
      default:
        if(l_next.image != undefined &amp;&amp; l_next.image != '') {
          l_imageSrc = 'files/'+ l_next.image;
          delete l_next;
          l_image.src = l_imageSrc;
          //replace the image or append it
          if(this.data.type == 'st_animation') {
            _$image.html('&lt;img src="'+ l_imageSrc +'" alt="" /&gt;');
          }
          else {
            _$image.prepend('&lt;img src="'+ l_imageSrc +'" alt="" /&gt;');
          }
          //trigger callback when loaded
          if(l_image.complete) {
            setTimeout(p_callback, 500);
          }
          else {
            l_image.onload = function() {
              setTimeout(p_callback, 500);
            }
          }
        }
  </code></pre>
  
  <p>and the callback function:</p>
  
  <pre><code>/*
   * Goes to the page with the specified id
   */
  goTo : function(p_pageID) {
    //empty content &amp; show loader
    _$content.empty();
    _currentPage = null; //empty the page data
    //_$loader.fadeIn(500);
    //get the page we're going to's data
    var l_data = this.getData(p_pageID);
    //instantiate this pages PageType sub-class
    eval('_currentPage = new '+ l_data.type +'(l_data)');
    l_data = null;
  },
  
  
  /**
   * Loads the xml of the page's id you pass it
   */
  getData : function(p_pageID) {
    var l_cacheBuster = '?cacheBuster='+ _structure.course.settings.cache_buster,
        l_xmlPath = './data/'+ p_pageID +'.xml'+ l_cacheBuster,
        l_data = new Object();
    //ajax request
    $.ajax({
      type: 'GET',
      url: l_xmlPath,
      dataType: 'xml',
      async: false,
      success: function(p_data) {
        //convert the xml structure to json
        l_data = $.xml2json(p_data);
        //check for parsing error
        if(l_data.text != undefined) {
          var l_dataString = String(l_data);
          if(l_dataString.indexOf('XML Parsing Error') &gt; -1) {
            trace(l_dataString);
          }
        }
      },
      error: function(p_response, p_status, p_error) {
        trace('Could not load "'+ l_xmlPath +"\"\r\n"+ p_status +': '+ p_error.name);
      }
    });
    return l_data;
  }
  </code></pre>
  
  <p>Thanks in advance...</p>