I have a slider with a html like this

<div id="bilder">                 | height: 70vh;
  <div id="pappediv">             | height: 100%;
    <div id="slider">             | height: 70%;
      <div id="imagecontainer">   | height: 100%;
        <p>                       | height: 100%;
          <img>                   | height: 100%;
          <img>                   | height: 100%; 
          <iframe>                | height: 100%;

(about 12 images and one iframe. all elements are closed, not shown here for brevety.)

I need to fill an array with the rendered widths of all images.
To this i use the following javascript after “$(document).ready(function(){“:

var elements = $('#imagecontainer>p').children();
var widths = [];
elements.each(function() {
    widths.push(this.width);
});
console.log(widths);`

The code works and delivers width-values for each image. Which also means, that the code is run after the images are available.

the problem is, that the width values returned are not the rendered width, which is viewport-height dependent but always the same “ideal” width value intrinsic to the images.

instead of “this.width” I tried a couple of other properties:

outerWidth - the images have a padding, which is then included 
offsetWidth - same as outerWidth
clientWidth - same

     elements.each(function() {
              rect = this.getBoundingClientRect();
              widths.push(rect.width);
     });

yields same

elements.each(function() {
        var thiswidth = getComputedStyle(this).width;
        widths.push(thiswidth);
    });

yields widths as string but also the wrong values.

also I used

$(window).on('load', function(){..}` 

instead of
$(document).ready(function(){..}

• without success.

Maybe a timing problem? Any hints welcome.