jQuery width() and height() return 0 for img element

by

You need to wait until the image has loaded to have access to the width and height data.

var $img = $('<img>');

$img.on('load', function(){
  console.log($(this).width());
});

$img.attr('src', file.url);

Or with plain JS:

var img = document.createElement('img');

img.onload = function(){
  console.log(this.width);
}

img.src = file.url;

Also, you don’t need to insert the image into the DOM before you read the width and height values, so you could leave your .loading-image replacement until after you calculate all of the correct positions.

More Related Contents:

  1. jQuery multiply vars inside value [duplicate]
  2. How to disable browser reload button on mouse click
  3. Jquery if statement with two class conditions [closed]
  4. How to check if element is visible after scrolling?
  5. Comet and jQuery [closed]
  6. Selected text event trigger in Javascript
  7. Why use jQuery on() instead of click()
  8. Can jQuery provide the tag name?
  9. How do I remove tinyMCE and then re-add it?
  10. Convert MySql DateTime stamp into JavaScript’s Date format
  11. Child element click event trigger the parent click event
  12. How to ONLY trigger parent click event when a child is clicked
  13. Extract all email addresses from bulk text using jquery
  14. how to break the _.each function in underscore.js
  15. Performance difference between jQuery’s .live(‘click’, fn) and .click(fn)
  16. Redirect automatically when selecting an item from a select drop-down list
  17. Checking password match while typing
  18. jQuery trigger action when a user scrolls past a certain part of the page
  19. Uploading multiple files asynchronously by blueimp jquery-fileupload
  20. How to pass variable value between different html pages in javascript
  21. Attach a blob to an input of type file in a form
  22. Combine two selectors with one jQuery object
  23. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  24. jQuery asynchronous function call, no AJAX request
  25. Set default time in bootstrap-datetimepicker
  26. Jquery/Javascript Opacity animation with scroll
  27. Javascript Highlight Selected Range Button
  28. Find object having maximum value for the `id` property in an array of objects
  29. Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link
  30. Does jQuery strip some html elements from a string when using .html()?

Leave a Comment