画像の幅が正しくない

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（負荷）ハンドラを活用することで、変数に幅を得るための方法です。 （現時点では、これはそうかもしれない、よりアクセス可能なオブジェクトでそれを配置することを検討。

あなたはまた別の関数を呼び出しを避けることができるこの方法は、各時間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() { 
 
     \t \t var imgWidth = this.width; 
 
      console.log(imgWidth); 
 
    \t \t }); 
 
     $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>