1

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

同时它只工作 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($...应该注意这一点，不是吗？

4

3 回答 3

4

你应该陷进去window.load，不是document.ready。

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

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

$(window).on('load', function() {
    // do image related stuff here
});
于 2012-07-24T13:13:50.140 回答
1

您确定图像已加载吗？

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

于 2012-07-24T13:14:29.910 回答
1

其他人建议使用 a$(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()，则在图像完成加载后将调用该函数，如果图像已缓存，则将从准备好的文档中调用该函数。

于 2012-07-24T13:58:55.427 回答