Get the real width and height of an image with JavaScript? (in Safari/Chrome)

by

Webkit browsers set the height and width property after the image is loaded. Instead of using timeouts, I’d recommend using an image’s onload event. Here’s a quick example:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

To avoid any of the effects CSS might have on the image’s dimensions, the code above makes an in memory copy of the image. This is a very clever solution suggested by FDisk.

You can also use the naturalHeight and naturalWidth HTML5 attributes.

More Related Contents:

  1. Is it possible to display a custom message in the beforeunload popup?
  2. Video auto play is not working in Safari and Chrome desktop browser
  3. Unexpected token ILLEGAL in webkit
  4. Open Safari / Google Chrome developer tools programmatically from JavaScript
  5. Chrome and Safari XSLT using JavaScript
  6. Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
  7. Export html table data to Excel using JavaScript / JQuery is not working properly in chrome browser
  8. onClick not working on mobile (touch)
  9. Chrome refuses to execute an AJAX script due to wrong MIME type
  10. Getting Error “Form submission canceled because the form is not connected”
  11. Chrome Extension how to send data from content script to popup.html
  12. Firing a keyboard event on Chrome
  13. Javascript Debugging line by line using Google Chrome
  14. Return HTML from a user-selected text
  15. Getting Chrome to prompt to save password when using AJAX to login
  16. Refused to execute inline event handler because it violates CSP. (SANDBOX)
  17. How can I make window.showmodaldialog work in chrome 37?
  18. Distinguish Chrome from Safari using jQuery.browser
  19. When using setInterval, if I switch tabs in Chrome and go back, the slider goes crazy catching up
  20. Webkit and jQuery draggable jumping
  21. CORS not working on Chrome
  22. Anchor tag download attribute not working :Bug in Chrome 35.0.1916.114
  23. Disable elastic scrolling in Safari [duplicate]
  24. Total canvas memory use exceeds the maximum limit (Safari 12)
  25. Javascript / Chrome – How to copy an object from the webkit inspector as code
  26. How can I stop jQuery.ajax() from logging failures to the console?
  27. tabs.executeScript – passing parameters and using libraries?
  28. Choppy/Laggy scroll event on Chrome and IE
  29. Synchronous console logging in Chrome
  30. The onclick event does not work for options

Leave a Comment