4

好奇的问题。我有一组图像，其中包含一些我想在 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（）检索，但在这种情况下，不一致）。

问候

4

2 回答 2

3

jQuery 不会等待$(document).ready().
请尝试这里$(window).load()的示例 5 中提到的

于 2012-06-04T19:16:34.137 回答
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);
        });
});
于 2012-06-04T19:16:36.413 回答