使用jQuery获得元素大小的几率为50/50

我有一个奇怪的问题，我发现很难在JSFIDLE上重现。我能做的最好的事情是，每次打印出正确的宽度和高度都很有效

同时，它只在50%的时间内有效。其他时候，图像大小和宽度为0

我的HTML是：

<div role="main" id="main">
<div class="row">
    <div class="twelve columns" style="float:none;">
            <img src="/media/files/clientfiles/test1_X-1a_.png" id="editorImage">
    </div>
    <div class="four columns">zalalal</div>
</div>
</div>

javascript是

jQuery(function($){
        var element = $('#editorImage');
        console.log(element);
        console.log(element.width());
        console.log(element.height());
        console.log(element.outerWidth());
        console.log(element.outerHeight());
        console.log(element.offsetWidth);
        console.log(element.offsetHeight);
});

起初我认为这与在文档准备就绪之前获取元素大小有关，但jQueryfunction$。。。应该注意这一点，不是吗？

您应该在window.load而不是document.ready上设置陷阱

后者等待DOM树准备就绪，但如果您还想等待加载所有图像，则前者是必需的

$(function() {
    // do DOM ready related stuff here
});

$(window).on('load', function() {
    // do image related stuff here
});

您应该在window.load而不是document.ready上设置陷阱

后者等待DOM树准备就绪，但如果您还想等待加载所有图像，则前者是必需的

$(function() {
    // do DOM ready related stuff here
});

$(window).on('load', function() {
    // do image related stuff here
});

---

您确定图像已加载吗

---

尝试在$window.loadfunction之后获取维度；或$img.loadfunction

您确定图像已加载吗

---

尝试在$window.loadfunction之后获取维度；或$img.loadfunction

其他人建议使用$window.load，但我可能会建议一个不同的选项

由于您可能希望在加载特定图像后立即进行样式设置，例如，假设您加载了100个图像，并且每行样式设置仅依赖于一个图像，因此您不希望等待加载所有图像

您可以在图像上使用.load函数，但是您必须小心，因为如果图像存储在缓存中，某些浏览器将不会调用此函数，因此我将函数拆分如下，如果需要，您可以传递参数，尽管在我的示例中，我将省略这些参数

function imageLoadedFunction() {
    //some code to execute once the image has loaded
    //(you could pass a reference to the image in the function)
}

$(document).ready(function() {
    $image = $('#imageId');
    if($image.width() != 0)
        imageLoadedFunction();
});

$('#imageId').load(function() {
    imageLoadedFunction();
});

---

这可确保如果未缓存图像，则加载函数将在图像加载完成后调用，如果缓存图像，则将从文档中调用该函数。

其他人建议使用$window.load，但我建议可能使用不同的选项

由于您可能希望在加载特定图像后立即进行样式设置，例如，假设您加载了100个图像，并且每行样式设置仅依赖于一个图像，因此您不希望等待加载所有图像

您可以在图像上使用.load函数，但是您必须小心，因为如果图像存储在缓存中，某些浏览器将不会调用此函数，因此我将函数拆分如下，如果需要，您可以传递参数，尽管在我的示例中，我将省略这些参数

function imageLoadedFunction() {
    //some code to execute once the image has loaded
    //(you could pass a reference to the image in the function)
}

$(document).ready(function() {
    $image = $('#imageId');
    if($image.width() != 0)
        imageLoadedFunction();
});

$('#imageId').load(function() {
    imageLoadedFunction();
});

---

这确保了如果图像未被缓存，则加载函数将在图像加载完成后调用，如果图像被缓存，则该函数将从文档中调用。

我个人不同意，在页面完全加载之前，您不应该真正与DOM元素交互。只是我的意见。@JustAnotherDeveloper我认为添加事件处理程序等操作完全可以接受。只是不要依赖任何具有最终值的属性。@JustAnotherDeveloper我不同意，如果您想在DOM准备就绪后使用ready，正常的地方做事情，但是，如果你需要等待图像加载，那么你必须使用加载，否则他们将没有宽度/高度等设置。然而，我更喜欢我的答案，因为如果一页上碰巧有很多图片，它并不依赖于所有图片的加载。@JonTaylor是的，他应该在document.ready中尽可能多地加载，而且只做依赖于在window.onload中加载的图像的事情。@JonTaylor同意-在加载每个图像时使用img.onload通常更可取。我个人不同意，在页面完全加载之前，你不应该真正与DOM元素交互。只是我的意见。@JustAnotherDeveloper我认为添加事件处理程序等操作完全可以接受。只是不要依赖任何具有最终值的属性。@JustAnotherDeveloper我不同意，如果您想在DOM准备就绪后使用ready，正常的地方做事情，但是，如果你需要等待图像加载，那么你必须使用加载，否则他们将没有宽度/高度等设置。然而，我更喜欢我的答案，因为如果一页上碰巧有很多图片，它并不依赖于所有的图片都被加载。@JonTaylor是的，他应该在document.ready中尽可能多地做，并且只做依赖于在window.onload中加载的图片的事情。@JonTaylor同意-在每个图片加载时使用img.onload通常会更好。