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>

查询：

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

如果是这样，chrome 没有理由不能$(this).height()从图像中抓取。你不需要img.onload那种方式

在旁注中，尽量不要用大写名称命名 JS 中的变量，除非它们是 Classes / Instsantiable 对象

于 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

我找到了一种解决方案，希望对您有所帮助。我已经在 img 标签中设置了图像的尺寸，它也适用于 Chrome。说：

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