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(関数);

于 2012-07-24T13:14:29.910 に答える
1

Others have suggested using a $(window).load however I would suggest potentially a different option.

Since you may want to style immediately after a specific image has loaded, for example lets say you have 100 images load and each row styling is only dependent on one image, you don't want to wait for all images to load.

You can use the .load function on an image, however you have to be careful since some browsers will not call this function if the image is stored in the cache, for this reason I split my functions up as follows, you can pass parameters if needed although for my example I will leave them out.

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

This ensures that if the image is not cached the load() function will be called once the image has finished loading, if the image is cached then the function will be called from within the document ready.

于 2012-07-24T13:58:55.427 に答える