code_junkie

How can I determine if an image has loaded, using Javascript/jQuery?

Nov 12th, 2011
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 KB | None | 0 0
  1. <img id="photo"
  2. src="a_really_big_file.jpg"
  3. alt="this is some alt text"
  4. title="this is some title text" />
  5.  
  6. $(function()
  7. {
  8. var REAL_WIDTH = $("#photo").width();
  9. var REAL_HEIGHT = $("#photo").height();
  10.  
  11. $(window).resize(adjust_photo_size);
  12. adjust_photo_size();
  13.  
  14. function adjust_photo_size()
  15. {
  16. if(REAL_HEIGHT < 150)
  17. {
  18. REAL_WIDTH = $("#photo").width();
  19. REAL_HEIGHT = $("#photo").height();
  20. if(REAL_HEIGHT < 150)
  21. {
  22. //image not loaded.. try again in a quarter-second
  23. setTimeout(adjust_photo_size, 250);
  24. return;
  25. }
  26. }
  27.  
  28. var new_width = . . . ;
  29. var new_height = . . . ;
  30.  
  31. $("#photo").width(Math.round(new_width));
  32. $("#photo").height(Math.round(new_height));
  33. }
  34.  
  35. });
  36.  
  37. <img id="photo"
  38. onload="photoLoaded();"
  39. src="a_really_big_file.jpg"
  40. alt="this is some alt text"
  41. title="this is some title text" />
  42.  
  43. //This must be outside $() because it may get called first
  44. var isPhotoLoaded = false;
  45. function photoLoaded()
  46. {
  47. isPhotoLoaded = true;
  48. }
  49.  
  50. $(function()
  51. {
  52. //Hides scrollbars, so we can resize properly. Set with JS instead of
  53. // CSS so that page doesn't break with JS disabled.
  54. $("body").css("overflow", "hidden");
  55.  
  56. var REAL_WIDTH = -1;
  57. var REAL_HEIGHT = -1;
  58.  
  59. $(window).resize(adjust_photo_size);
  60. adjust_photo_size();
  61.  
  62. function adjust_photo_size()
  63. {
  64. if(!isPhotoLoaded)
  65. {
  66. //image not loaded.. try again in a quarter-second
  67. setTimeout(adjust_photo_size, 250);
  68. return;
  69. }
  70. else if(REAL_WIDTH < 0)
  71. {
  72. //first time in this function since photo loaded
  73. REAL_WIDTH = $("#photo").width();
  74. REAL_HEIGHT = $("#photo").height();
  75. }
  76.  
  77. var new_width = . . . ;
  78. var new_height = . . . ;
  79.  
  80. $("#photo").width(Math.round(new_width));
  81. $("#photo").height(Math.round(new_height));
  82. }
  83.  
  84. });
  85.  
  86. <img id="photo"
  87. onload='loaded(this.id)'
  88. src="a_really_big_file.jpg"
  89. alt="this is some alt text"
  90. title="this is some title text" />
  91.  
  92. $("#photo").load(function() {
  93. alert("Hello from Image");
  94. });
  95.  
  96. doShow = function(){
  97. if($('#img_id').attr('complete')){
  98. alert('Image is loaded!');
  99. } else {
  100. window.setTimeout('doShow()',100);
  101. }
  102. };
  103.  
  104. $('#img_id').attr('src','image.jpg');
  105.  
  106. doShow();
  107.  
  108. <img id="myimage" onload="$(this).data('loaded', 'loaded');" src="lolcats.jpg" />
  109.  
  110. if ($('#myimage').data('loaded')) {
  111. // loaded, so do stuff
  112. }
Add Comment
Please, Sign In to add comment