时间戳

首页 > 解决方案 > 获取元素的尺寸，其中包含延迟加载的图像

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

问题描述

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

var slide = $('.slides');

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

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

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

.slides{
    width: min-content;
}

“幻灯片”元素内部是一个<img>元素，每个元素都有一个单独的纵横比，但高度相同。

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

标签： javascriptjquerydom

解决方案

问题解决了。

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

我是这样解决的：

此代码剪断等待图像加载以获取宽度

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

推荐阅读