title: How to make preloader execute on image load in javascript for wordpress site
body: <p>The first images of my slider are loading after page load. I want the page viewed with the first slides displayed. I have written a function that creates a div overlay that hides the page initially. I need a function (can be in Jquery) that will hide the div overlay when triggered by an event that will result in the hiding of the div overlay when the first images of my slider are displayed. Site in question: <a href="http://applaudvideo.com" rel="nofollow">applaudvideo.com</a> password: goonies </p>
  
  <p>Javascript (this is in the header.php of my WP site. It creates the div that hides the page.)</p>
  
  <pre><code>if (document.getElementById) {
  document.write('&lt;style type="text/css" media="screen"&gt;#overlay 
  {display:block;height:100%;width:100%;background:#2E0854;position:fixed;z-index:99999}
  &lt;/style&gt;');
  }
  </code></pre>
  
  <p>CSS: (in body)</p>
  
  <pre><code>&lt;div id=overlay&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The above function works. I just need a function that will hide the div overlay by binding or listening to an event. The function would be triggered, hide the overlay div, and the slider's images would already be rendered/displayed.</p>
  
  <p>The following are functions I think I can bind or listen or attach to to hide the div overlay:</p>
  
  <blockquote>
    <p>Copy and Paste the Below listed API Functions into your Functions for Event Listening.</p>
  </blockquote>
  
  <pre><code>revapi10.bind("revolution.slide.onloaded",function (e) {
  //alert("slider loaded");
  </code></pre>
  
  <p>});</p>
  
  <pre><code>revapi10.bind("revolution.slide.onbeforeswap",function (e) {
  //alert("before swap");
  </code></pre>
  
  <p>});</p>
  
  <pre><code>revapi10.bind("revolution.slide.onchange",function (e,data) {
  //alert("slide changed to: "+data.slideIndex);
  </code></pre>