Question

好奇的问题。我有一组图像，其中包含一些我想在div中使用的属性（作为标题）。使用每个，我想获得图像的宽度（和一些其他属性），以正确对齐动态生成的div（作为图像的标题）。

img = $('img') 
img.each(function(index){
    var width = $(this).width();
    console.log(width);
    // other properties
    $('<div class="caption">Some text</div>').insertAfter($(this));

$(this).next().css({
  'width': width
  // other properties
});

但是，有时$（this）.width（）得到正确的值，其他时间得到0.当按下方向栏时返回时表现特别好，但是当我按下Ctrl + R而不是Chrome时。它在所有浏览器中都不起作用，所以它很乱。我认为Jquery在加载图像之前试图检索width（），所以我将我的代码包装在document.ready（function（）{}）中而不是（function（）{}）（）但是它不起作用无论哪种方式。

可能发生什么事？作为参考，这些是应用于图像的样式：

display: block;
padding: 4px;
line-height: 1;
max-width: 100%;
margin-left: auto;
margin-right: auto;

所以我想获得计算出的宽度（据我所知，应该由.css（）检索，但在这种情况下，不一致）。

此致

Answer 1

jQuery不会等待$(document).ready()中的图片请尝试$(window).load()，如示例5 here

中所述

Answer 2

运行该代码时，图像很可能不会完全加载。尝试确保首先加载图像。

function imgDone(){
    var width = $(this).width();
    console.log(width);
    // other properties
    $('<div class="caption">Some text</div>').insertAfter($(this));
}
$('img').each(function(index){
    if (this.complete || this.readyState = 4)
        imgDone.apply(this);
    else
        $(this).load(function(){
            imgDone.apply(this);
        });
});

加载时图像中的属性检索不可靠

2 个答案: