在chrome中使用jquery获取图像高度答案

【问题标题】：get image height with jquery in chrome在chrome中使用jquery获取图像高度
【发布时间】：2013-11-18 18:36:56
【问题描述】：

我有这个问题：我正在尝试获取 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 必须先加载图像，然后再获取高度。

提前谢谢你。

【问题讨论】：

标签： jquery image google-chrome height

【解决方案1】：

在您的img.onload 中使用：

var h = $(this).get(0).height; // height
var w = $(this).get(0).width; // width

【讨论】：

【解决方案2】：

为什么不一直使用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 元素被渲染之前运行。

【讨论】：

因为如果图像被缓存，它的工作方式就不同了？
在特定情况下。如果图像缓存在浏览器中但元素尚未加载，这应该可以正常工作。

【解决方案3】：

我希望所有这些都在$(document).ready(function () { }); 内？

如果是这样，chrome 没有理由不能从图像中获取$(this).height()。这样你就不需要img.onload了

附带说明，尽量不要在 JS 中使用大写名称命名变量，除非它们是 Classes / Instsantiable 对象

【讨论】：

有什么具体原因为什么应该禁止变量名使用驼峰命名法，很想知道？
编码约定可能因情况而异。我认为“从不”在这里有点强。
Touche :) 将其更改为您不应该使用它。这只是一个非常常见的编码约定，它可以让其他开发人员知道您何时需要实例化new WhateverThing()。数千行代码在 Camel 中的一切都是荒谬的
是的 mcpDESIGNS，所有这些都在 $(document).ready() 里面奇怪的是，如果我使用 $(window).load 代替，chrome 能够正确获得图片。我注意到的另一件事是 img.onload() 似乎在 $.each() 中不起作用。脚本完全冻结。

【解决方案4】：

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

<img width="464" height="287" src="myimg.jpg">

【讨论】：