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

奇怪的问题。我有一组带有一些属性的图像，我想在div中使用它们（作为标题）。使用每一个，我希望获得图像的宽度（以及一些其他属性），以便正确对齐动态生成的div（作为图像的标题）

因此，我想得到计算的宽度（据我所知，应该由.css（）检索，但在本例中并不一致）

---

问候

jQuery不会等待

$（document.ready（）

---

请尝试

$（window）.load（）

，而不是像示例5中提到的那样运行该代码时，图像很可能没有一直完全加载。尝试确保先加载图像

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

函数imgDone（）{
var width=$（this.width（）；
控制台。原木（宽度）；
//其他属性
$（'Some text'）。插入（$（this））；
}
$（'img'）。每个（函数（索引）{
if（this.complete | | this.readyState=4）
imgDone.apply（这个）；
其他的
$（this.load（function（））{
imgDone.apply（这个）；
});
});

查看此问题的答案：不确定您的意思。width（）vs css（'width'）？。outerWidth（）获取计算的大小。不，这根本不起作用。

$（窗口）。ready

与

$（文档）完全相同。ready

，请阅读此处：可能您的意思是

$（窗口）。load

？有趣。load（）在Chrome中修复了它，但在Firefox中没有。它正确地设置了width（），但我所说的其他属性（左边距，右边距）设置为0，而在Chrome中它们的值是正确的。不，对不起。。。在Chrome上有一点不可靠，最后的图片。很好，我会试试。这似乎是一个问题，因为根据Andreas的建议，.load在Chrome中修复了它，但在Firefox中没有其他属性。很好，现在Chrome一直在工作（我想），但出于某种原因，即使在我删除了所有与宽度相关的内容后，它在Firefox中也大量扩展了宽度（可能我犯了一个错误，因为这没有意义。不，你是对的。正如我所想，我犯了一个愚蠢的错误，没有设置宽度：100%，所以图像溢出了很多。但是我不理解你代码的第二部分……你说，检查每个图像，看看它是否已完全加载。如果有，请执行Jquery部分或除我之外的任何操作。）f它没有…什么？$（this）。加载与this.complete | | this.readyState不等价，或者有什么区别？。在图像上使用加载时，将在图像完成加载时触发。complete和readyState条件检查图像是否已加载，在这种情况下，在某些情况下可能不会触发加载事件（取决于添加加载事件与设置src值的顺序）。您可以摆脱if语句，只需使用.load（onDone），确保您在IE8中测试它，这是否真的是

if

条件下的赋值？

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

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