24000

find the dimensions of a dynamically loaded but DOM-appended image using jquery?

Question:

I'm loading the source of an image dynamically using ajax, where s is this source. I create an image element in the DOM, assign it this source once it's loaded, and then append it to a div called imgwrapper. Then I try to get the image's dimensions, but it doesn't work. I'm aware you can't get the dimensions of an image that's dynamically loaded, but not even after being appended to the DOM?

My code is as below:

//use ajax to get value of s (the image source) img = document.createElement("img"); img.src = s; $('#imgwrapper').appendChild(img); console.log($('#imgwrapper').find('img').width());

this returns 0, instead of giving me the image's width.

Answer1:

Wait till the image has finished loading

//use ajax to get value of s (the image source) img = document.createElement("img"); img.onload = function() { console.log($('#imgwrapper').find('img').width()); }; img.src = s; $('#imgwrapper').append(img);

<strong>Edit</strong><br /> As @MattiasBuelens mentioned. There is no .appendChild() for a jQuery object. That should be .append() instead

Answer2:

You can try this:

img = document.createElement("img"); img.src = "http://placehold.it/350x150"; $('#imgwrapper').append(img); console.log($('#imgwrapper').find('img').width());

Working example: <a href="http://jsbin.com/adajuh/1/" rel="nofollow">http://jsbin.com/adajuh/1/</a>

Recommend

  • Make a scaling/responsive image stick to bottom of div on/during resize
  • How to access an Image Dom Element with Vaadin/GWT?
  • Python: List of dictionary stores only last appended value in every iteration
  • How to display HasMany relationship in Ember
  • Incrementing array values - Arduino
  • How list all tables with data changes in the last 24 hours?
  • MVC - Binding dynamically added controls to a List in a Model
  • How to put tcp server on another thread in python
  • How to append to Android MediaRecorder output file
  • jQuery not triggering on appended item
  • dynamic change of templateUrl in ui-router from one state to another
  • Appending same node in different windows
  • Appending into another table and avoiding duplicates
  • dc.js: Reducing rows in data table
  • drop duplicates pandas dataframe
  • Why does the following throw an “Object doesn't support property or method 'importNode
  • How to request unsampled report from Google Analytics Management API using Google Apps Script?
  • Outputting SharePoint Hyperlink Column as URL
  • Is there a package like bigmemory in R that can deal with large list objects?
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • Tamper-proof configuration files in .NET?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • FileReader+canvas image loading problem
  • Insert into database using onclick function
  • Deselecting radio buttons while keeping the View Model in synch
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • WinForms: two way TextBox problem
  • Change an a tag attribute in JavaScript based on screen width
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • How to set the response of a form post action to a iframe source?
  • how does django model after text[] in postgresql [duplicate]
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • unknown Exception android
  • Running Map reduces the dimensions of the matrices
  • How to load view controller without button in storyboard?