0

私はこの問題を抱えています：div内のいくつかの画像の高さを取得しようとしていますが、Chromeに問題があります。私のすべての試みは0またはNaNを返します。これが私のコードです：

HTML：

<div class="mid">
    <div class="cimglist">
        <a href="#"><img src="img1.jpg"></a>
        <a href="#"><img src="img2.jpg"></a>
        <a href="#"><img src="img3.jpg"></a>
        <a href="#"><img src="img4.jpg"></a>
        <a href="#"><img src="img5.jpg"></a>
    </div>
</div>

JQuery：

var CardsTotalImages = 0;
var CardsCurrentImage = 0;
var CardsHeights = [];

$('.cimglist img').each(function() {
    /*
    CardsHeights[CardsCurrentImage] = $(this).height(); 
    CardsCurrentImage++;
    //this works great on IE and FF
    */
    var img = new Image();
    img.onload(function() {
        CardsHeights[CardsCurrentImage] = parseInt($(this).height());
        CardsCurrentImage++;
    });
    img.src = $(this).attr('src');
});

私はすべての投稿を検索して解決策を見つけましたが、私が得た唯一の役立つ情報は、Chromeが最初に画像を読み込んでから、高さを取得する必要があるということです。

前もって感謝します。

4

4 に答える 4

0

これらすべてが$(document).ready(function () { });?内にあることを願っています。

もしそうなら、クロムが画像から取得できない理由はありません$(this).height()。img.onloadあなたはその方法を必要としません

補足として、クラス/インスタンス化可能なオブジェクトでない限り、JS の変数に大文字の名前を付けないようにしてください。

于 2012-11-06T19:20:23.300 に答える
0

jQuery をずっと使わないのはなぜですか?

var CardsTotalImages = 0;
var CardsCurrentImage = 0;
var CardsHeights = [];

$('.cimglist').on('load', 'img', function() {
    CardsHeights[CardsCurrentImage] = $(this).height() || this.height; // added an alternative just in case. i've seen firefox do strange things during my time as a front-end developer.
    CardsCurrentImage++;
});

編集：

このコードは、img要素がレンダリングされる前に実行する必要があります。

于 2012-11-06T19:21:29.757 に答える
0

あなたのimg.onload使用で：

var h = $(this).get(0).height; // height
var w = $(this).get(0).width; // width
于 2012-11-06T19:17:56.897 に答える
0

私は1つの解決策を見つけました。img タグで画像のサイズを設定しましたが、Chrome でも機能しました。言う：

<img width="464" height="287" src="myimg.jpg">
于 2013-11-18T10:36:56.567 に答える