无法获得正确的图像宽度

Question

我在控制台中显示图像的宽度时遇到问题。 我有一个函数，它会在调用该函数后1秒钟后立即显示图像的宽度。 对于第一个，我得到0，而在1秒钟后，我得到实际结果。 我想要的是无需等待1秒钟即可获得该宽度，以便在创建图像时将其保存在某个变量中。 这是我的代码：

的HTML

<div class="image-container" id="top-img">
    <!-- 1st row of images -->
</div>

的CSS

.image-container {
    height: 200px;
    left: calc((100vw - 940px) / -2);
    background-color: rgba(0, 0, 0, 0.4);
}

.image-container img {
    position: absolute;
    right: 0;
    max-height: 100%;
    border-radius: 5px;
}

JS

var top_images = [7, 6, 9, 8, 5];
var childImg;
var img;
var top_slider;

$(document).ready(function(){
    top_slider = document.getElementById('top-img');

    insertImages();
});

function insertImages(){
    var i;


    for(i = 0; i < top_images.length; i++){
        childImg = document.createElement('img');
        childImg.setAttribute('src', 'Assets/slider-image-' + top_images[i] + '.jpg');
        childImg.setAttribute('alt', 'image ' + top_images[i]);

        top_slider.appendChild(childImg);
        img = top_slider.getElementsByTagName('img')[i];
        getImageWidth(img);
    }
}

function getImageWidth(img){
    console.log('init: ' + img.clientWidth); // get 0, I want to get actual result here - not having to create setTimeout() function
    setTimeout(function(){
        console.log(img.clientWidth); // get correct width
    }, 1000);
}

有人有建议吗？ 我尝试使用.width，.naturalWidth和一些移动方式...它们几乎都给出了相同的结果。 所以我想我的问题是如何在不调用任何计时器函数的情况下获得宽度？ 我想念什么？

Answer 1

看起来@asimovwasright是正确的。 几毫秒内未设置这些值。 如果您多次运行此代码段，将会看到在不同时间设置了某些图像宽度。 您可以使用childImg.setAttribute（'width'，51）显式设置循环内的宽度，以在“ init” console.log上看到正确的值，但是我想这并不能真正解决不使用setTimOut的问题如果您有动态宽度。

 var top_images = [7, 6, 9, 8, 5]; var childImg; var img; var top_slider; $(document).ready(function(){ top_slider = document.getElementById('top-img'); insertImages(); }); function insertImages(){ var i; for(i = 0; i < top_images.length; i++){ childImg = document.createElement('img'); childImg.setAttribute('src', 'Assets/slider-image-' + top_images[i] + '.jpg'); childImg.setAttribute('alt', 'image ' + top_images[i]); //get the width of the parent, then set that width into each new item var parentWidth = top_slider.clientWidth; childImg.setAttribute('width', parentWidth); top_slider.appendChild(childImg); img = top_slider.getElementsByTagName('img')[i]; getImageWidth(img); } } function getImageWidth(img){ console.log('init: ' + img.clientWidth); setTimeout(function(){ console.log("1ms: "+img.clientWidth); }, 1); setTimeout(function(){ console.log("10ms: "+img.clientWidth); }, 10); setTimeout(function(){ console.log("100ms: "+img.clientWidth); }, 100); setTimeout(function(){ console.log("500ms: "+img.clientWidth); }, 1000); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image-container" id="top-img"> <!-- 1st row of images --> </div> 

Answer 2

这是一种通过利用jQuery的.on（load）处理函数将宽度变为变量的方法。 （目前，这每次都会覆盖var，因此可以考虑将其放在更易于访问的对象中。

这样，您还可以避免调用另一个函数。

如果您想使用它，这是小提琴 。

 var top_images = [350, 450, 550]; var childImg; var img; var top_slider; $(document).ready(function(){ $top_slider = $('#top-img'); insertImages(); }); function insertImages(){ var i; for(i = 0; i < top_images.length; i++){ $childImg = $('<img class="image" />'); $childImg.attr('src', 'https://via.placeholder.com/'+top_images[i]+'x250').on('load', function() { var imgWidth = this.width; console.log(imgWidth); }); $childImg.attr('alt', 'image ' + top_images[i]); $top_slider.append($childImg); $img = $top_slider.children('img').eq(i); } } 

 .image-container { height: 200px; left: calc((100vw - 940px) / -2); background-color: rgba(0, 0, 0, 0.4); } .image-container img { position: absolute; right: 0; max-height: 100%; border-radius: 5px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="image-container" id="top-img"> <!-- 1st row of images --> </div>