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（＆＃39; width＆＃39;，51）在循环内显式设置宽度，以便在＆＃34; init＆＃34;上看到正确的值。 console.log，但我认为如果你有动态宽度，这并没有真正解决不使用setTimOut的问题。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是通过利用jQuery的.on（加载）处理程序将宽度变为变量的方法。（目前，这将每次覆盖var，因此可以考虑将其置于更易于访问的对象中。

这样你也可以避免调用另一个函数。

如果您想玩它，请fiddle。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

没有得到正确的图像宽度

2 个答案: