javascript - 没有获得正确的图像宽度

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

这是一种利用 jQuery 的 .on(load) 处理程序将宽度获取到变量中的方法。 (目前，这每次都会覆盖 var，因此也许考虑将其放置在更易于访问的对象中。

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

这是fiddle如果你想玩的话。

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>