height and width method doesn't work when jquery library located in head section??

height and width method doesn't work when jquery library located in head section??

Hello guy!
I'm new in jquery and i have a small test  with height and width method in jquery

I use the seperate file to execute my code to get height and width of element. but when i call it in body and jquery library in head section. So height and width method doesn't work at all. I don't know why but when i locate jquery library in body section (the same place with my file) . It worked fine!! Below is my code 

Html:
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  6.      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  7. </head>
  9. <body>
  10.     <div class="container">
  12.  <img src="day15/img4.jpg" alt="Alternate Text" class="img" />
  13.     </div>
  14.  <script src="this_is_my_seperate_file.js" type="text/javascript"></script>
  15.  <script type="text/javascript">
  16.  (function () {
  18.  //test
  19.             var test = new Getwidthheightimg($('.img'));
  25.             test.show_result();
  26.         })();
  27.     </script>
  29. </body>
  30. </html>
And this is "  this_is_my_seperate_file.js" file

  2. function Getwidthheightimg(img) {
  3.     this.img_width = img[0].width; //get width of image
  4.     this.img_height = img[0].height; //get height of image
  5. }

  7. Getwidthheightimg.prototype.show_result = function () {
  8.     console.log(this.img_width);
  9.     console.log(this.img_height);
  10. };
So that's it but it doesn't work untill i put jquery library above my file(.js) like this in the body section:

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  2. <script src="this_is_my_seperate_file.js" type="text/javascript"></script>
Hope you help me got it clearly! Thanks.