Img.on(“load”) executes after the img is loaded but before it has its size set (IE)

JavaScript
1

I’ve some images, that I want to load by assigning their “data-src” attribute value to theirs “src” attribute and vertically center them after.

It works without a problem in all browsers except IE (tested from 8 to edge).

In IE some images get centered without a problem, but some wont and it is because code in the .on(“load”) event gets (probably) executed after the image is loaded, but before it has its size set.

Is there any way to always execute the code after the image is loaded and its size is set (in IE)?

I tried to return DOM naturalHeight and clientHeight, and while naturalHeight works properly in IE, clientHeight (the one I need) does not.

JSFIDDLE (open in IE, output values of 30 are the problem - IE img placeholder height)

(for) https://jsfiddle.net/x60bwgw7/4/

(each) https://jsfiddle.net/v3y2v8cf/3/

Note: code used in jsfiddle is just a small snippet of the original script, which dynamically loads images (in the viewport) on window.load, scroll, resize and other events

*Workaround: jsfiddle.net/0rhjt0wn/1/

2

Your problem is caused by using data-src, which is not recognised in legacy browsers. You can simplify your script and achieve the same result by using the title attribute to hold the src. The loading problem will not occur if you place your JavaScript at the bottom of your page, just above the </body> tag.

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.

<body>

<div id="wrap">
  <div id="divElement">
    <img class="imgElement" title="http://www.allanp.net/AA/img_1a.gif" alt="test">
    <img class="imgElement" title="http://www.allanp.net/AA/img_2a.gif" alt="test">
    <img class="imgElement" title="http://www.allanp.net/AA/img_3a.gif" alt="test">
  </div>
</div>
<script type="text/javascript">
 var thisSrc;
 var allImgs=document.getElementById("divElement").getElementsByTagName("img");
 for(var i=0;i<allImgs.length;i++)
  {  thisSrc=allImgs[i].title;
     allImgs[i].src=thisSrc; 
  }
</script>

</body>

I have placed this example in JSFiddle for you to see the result.

3

  • 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.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.