获取元素的尺寸，其中包含延迟加载的图像

Question

我目前正在努力使用offsetWidth 获取元素“幻灯片”的宽度。

var slide = $('.slides');

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

幻灯片中的所有元素都有不同的宽度。但是，它为所有元素返回相同的值，并且仅对第一个元素返回正确的值。

元素有一个width: min-content 属性。

.slides{
    width: min-content;
}

'slides' 元素内部是一个 <img> 元素，每个元素都有各自的纵横比，但高度相同。

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

Answer 1

问题解决了。

如果您有同样的问题，请检查孩子内部的内容是否没有延迟加载。就像我的情况一样，里面的图像在视口中后被加载。这意味着在此之前它还没有宽度。

我是这样解决的：

这段代码会等待图片加载以获取宽度

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++;
    });
});