javascript - Getting dimensions of Element with image inside that loads late

Question

I'm currently struggeling with getting the width of a element 'slides' by using offsetWidth.

var slide = $('.slides');

console.log(slide[0].offsetWidth);
console.log(slide[1].offsetWidth);

all the Elements in slides have a different width. However it returns the same value for all Elements and thats only true for the first Element.

The Elements have a width: min-content property.

.slides{
    width: min-content;
}

Inside the 'slides' Elements is a <img> Element and each has a individual aspect ratio but the same height.

.slides img{
    max-width: inherit;
    height: 35vw;
}

question from:https://stackoverflow.com/questions/65951131/getting-dimensions-of-element-with-image-inside-that-loads-late

Answer 1

Problem Solved.

If you have the same issue, check if the content inside the child doesn't get loaded late. Like in my case the image inside gets loaded after it is in the viewport. That means it hasn't had a width until then.

I solved it that way:

this code snipped waits for the images to load in order to get the width

var counter = 0;
$(document).ready(function(){
    images_length = $('.gallery-image').length;
    //i needed to wait until all images have loaded so i picked the last image that fires the last event.
    $('.gallery-image').on("load", function() {
        if(counter == images_length -1){
            var slides = $('.gallery-slide', this);
            for (let i = 0; i < slides.length; i++) {
                 console.log(slides[i].offsetWidth);
            }
        }
        counter++;
    });
});