Here is the code to do the job. I have used some sample images that are not as wide as your 3500px wide images in your script. Your originals also work in this script, but they are too wide to show you the effect here.
You will notice that I have also removed your “holder” div. If you are going to put the tags into your page as information holders, you may as well use them to display the final image.
Thx for trying but you didnt get my problem at all.
JSFIDDLE I provided is just a very simplified sample (e.g. note) and the holder div’s only purpose is to present outputed values (img src and height).
My problem is in all versions of IE, but Im only targeting 8 to edge, which (partially) support data-* attribute and I have had no problem loading images using that attribute (using title attribute sucks in general, because it can mess with your SEO and you wouldnt be able to set its value via pure HTML)
To simplify the problem → IE executes the CODE within the on(“load”) after the images have been loaded into the page, but before they are rendered. That means the only height/width value I can get is image’s naturalHeight/naturalWidth. I’ve also written a workaround which calculates the image ratio from its natural size and then sets image’s height before it is centered. Im simply looking for an event that executes its content after the images have been loaded and also rendered (in IE)
- JSFIDDLE code works without a problem in other browsers
UPDATE → Seems like the problem is that IE renders image after it is loaded, while other browsers render it while it is being loaded, but Im just guessing here.