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

【问题标题】：50/50 chance of getting element size with jQuery使用 jQuery 获得元素大小的几率为 50/50
【发布时间】：2012-07-22 19:33:18
【问题描述】：

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

同一时间它只工作 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>

匹配的css是：

#main {
width: 1000px;
margin: 50px auto;
background: white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.23);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.23);
box-shadow: 0px 0px 5px rgba(0,0,0,0.23);
color: #666;}

.row {
width: 1000px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
}

.row .twelve {
width: 75%;
}

.column, .columns {
float: left;
min-height: 1px;
padding: 0 10px;
position: relative;
}

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

起初我认为这与在文档准备好之前尝试获取元素大小有关，但jQuery(function($... 应该注意这一点，不是吗？

【问题讨论】：

标签： jquery image window image-size

【解决方案1】：

您应该使用window.load，而不是document.ready。

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

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

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

【讨论】：

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

【解决方案2】：

你确定图片已经加载了吗？

尝试在 $(window).load(function); 之后获取尺寸或 $(img).load(function);

【讨论】：

【解决方案3】：

其他人建议使用$(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();
});

这样可以确保如果图像未缓存，则在图像完成加载后将调用 load() 函数，如果图像已缓存，则将从准备好的文档中调用该函数。

【讨论】：