title: Chrome and JQuery issue - $(document).ready(function() { }); being called before page is loaded
body: <p>I am learning JQuery, and I have ran into an odd issue.  I made a slideshow, and it works in IE, Firefox 3.0 and Firefox 3.5, but the initial image doesn't work in Chrome.  </p>
  
  <p>The script just cycles through a list of images and resizes the divs (image, caption) based on the size of the viewing window.  If I move the $(document).ready(function() { }); script to the end of the body, the script works OK.  </p>
  
  <p>I was under the impression that the $(document).ready function wouldn't be called until the document had totally loaded.  Is that correct, and the Chrome render engine is doing something odd, or I am doing something wrong?</p>
  
  <p>here is the code:</p>
  
  <p>slideShow.html</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="Stylesheet" type="text/css" href="css/main.css" /&gt;
  
  &lt;script src="scripts/jquery-1.3.2.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="scripts/jquery.slideShow.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          slideShow();
      });
  &lt;/script&gt;  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="gallery"&gt;
          &lt;a href="#" class="show"&gt;
              &lt;img src="images/bees1_edited.jpg" alt="Bees" title="" rel="&lt;h3&gt;Bees!&lt;/h3&gt; Some bees in my lavender." /&gt;&lt;/a&gt;
          &lt;a href="#"&gt;
              &lt;img src="images/bee1_edited.jpg" alt="Bee One" title="" rel="&lt;h3&gt;Bee&lt;/h3&gt; Close-up of a bee on a lavender flower." /&gt;
          &lt;/a&gt;
  .
  .
  .
      &lt;div class="caption"&gt;
          &lt;div class="content"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;
  &lt;/div&gt;  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>jquery.slideShow.js</p>
  
  <pre><code>function slideShow() {
  
  //Set the opacity of all images to 0  
  $('#gallery a').css({ opacity: 0.0 });
  
  //Get the first image and display it (set it to full opacity)  
  $('#gallery a:first').css({ opacity: 1.0 });
  
  //Set the caption background to semi-transparent  
  $('#gallery .caption').css({ opacity: 0.7 });
  
  //Resize the width of the caption according to the image width
  $('#gallery a:first').find('img').css({ height: $('#gallery a:first').find('img').height() });
  $('#gallery a:first').find('img').css({ width: $('#gallery a:first').find('img').width() });
  
  var captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1;
  
  if ($(window).height() &lt; $('#gallery a:first').find('img').height()) {
      var imageWidth = parseInt($('#gallery a:first').find('img').width());
      var imageHeight = parseInt($('#gallery a:first').find('img').height());
  
      $('#gallery a:first').find('img').css({ height: $(window).height() - 10 });
      var cssHeight = parseInt($('#gallery a:first').find('img').css('height'));
  
      $('#gallery a:first').find('img').css({ width: parseInt((cssHeight * imageWidth) / cssHeight) });
  
      captionPosition = parseInt($('#gallery a:first').find('img').css('height') * -1);
  }
  
  if ($(window).width() &lt; $('#gallery a:first').find('img').width()) {
      var imageWidth = parseInt($('#gallery a:first').find('img').width());
      var imageHeight = parseInt($('#gallery a:first').find('img').height());
  
      $('#gallery a:first').find('img').css({ width: ($(window).width() - 50) });
      var cssWidth = parseInt($('#gallery a:first').find('img').css('width'));
  
      $('#gallery a:first').find('img').css({ height: parseInt((cssWidth * imageHeight) / imageWidth) });
  
      captionPosition = parseInt($('#gallery a:first').find('img').css('height')) * -1;
  }
  
  $('#gallery .caption').css({ width: $('#gallery a:first').find('img').css('width') });
  $('#gallery .caption').css({ bottom: captionPosition });
  
  //Get the caption of the first image from REL attribute and display it  
  $('#gallery .content').html($('#gallery a:first').find('img').attr('rel')).animate({ opacity: 0.7 }, 400);
  
  //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds  
  setInterval('gallery()', 6000);
  
  }
  
  function gallery() {
  
  //if no IMGs have the show class, grab the first image  
  var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));
  
  //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
  var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));
  
  //Get next image caption  
  var caption = next.find('img').attr('rel');
  
  //Set the fade in effect for the next image, show class has higher z-index  
  next.css({ opacity: 0.0 }).addClass('show').animate({ opacity: 1.0 }, 1000);
  
  //Hide the current image
  current.animate({ opacity: 0.0 }, 1000).removeClass('show');
  next.find('img').css({ height: next.find('img').height() });
  next.find('img').css({ width: next.find('img').width() });
  
  var captionPosition = parseInt(next.find('img').css('height')) * -1;
  
  if (next.find('img').height() &gt; $(window).height()) {
  
      var imageHeight = parseInt(next.find('img').height());
      var imageWidth = parseInt(next.find('img').width());
  
      next.find('img').css({ height: (parseInt($(window).height()) - 50) });
      var cssHeight = parseInt(next.find('img').css('height'));
  
      var testVal = parseInt((cssHeight * imageWidth) / imageHeight);
  
      next.find('img').css({ width: testVal });
      //alert('css width=' + next.find('img').css('width') + ', css height=' + cssHeight + ', img width = ' + imageWidth + ', img height = ' + imageHeight + ', window width = ' + $(window).width() + ', window height = ' + $(window).height());
      captionPosition = parseInt(cssHeight * -1);
  }
  
  if (parseInt(next.find('img').css('width')) &gt; parseInt($(window).width())) {
      var imageHeight = parseInt(next.find('img').height());
      var imageWidth = parseInt(next.find('img').width());
  
      next.find('img').css({ width: (parseInt($(window).width()) - 50) });
      var cssWidth = parseInt(next.find('img').css('width'));
  
      var testVal = parseInt((cssWidth * imageHeight) / imageWidth);
  
      next.find('img').css({ height: testVal });
      //alert('imageWidth = ' + imageWidth + 'imageHeight = ' + imageHeight + 'css height = ' + next.find('img').css('height') + ', css width = ' + next.find('img').css('width'));
      captionPosition = parseInt(next.find('img').css('height')) * -1;
  }
  $('#gallery .caption').css({ width: next.find('img').css('width') });
  $('#gallery .caption').css({ bottom: captionPosition });
  
  //Set the opacity to 0 and height to 1px  
  $('#gallery .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });
  
  //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect  
  $('#gallery .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);
  
  //Display the content  
  $('#gallery .content').html(caption);
  
  } 
  </code></pre>