jquery 设置高度等于图像高度的工作时间约为 50%答案

【问题标题】：jquery set height equal to image height works approx 50% of the timejquery 设置高度等于图像高度的工作时间约为 50%
【发布时间】：2014-01-19 16:39:57
【问题描述】：

我有一些代码基本上将图像描述放在未知高度的图像旁边。这里有一些伪代码：

$( document ).ready(function() {
  $(".productdescription").css({'height':($(".productimage img").height()+'px')});
});

在此处查看实际操作：http://jsfiddle.net/94xn5/

此代码适用于 jsfiddle，但在我的实际代码中，它会正确调整 div 大约 1/2 的时间，大约 1/2 的时间将其调整为 0px....

我在调试时遇到问题，为什么它有时有效而其他无效？

如果有帮助 - 我正在 shopify 预览窗格中对此进行测试，也许这与我的 JS 搞砸了？

谢谢！

PS - 如果有更简单的方法来做我想做的事情，只用纯 CSS，请告诉我！我对 JS 或 CSS 都没有经验

编辑 - 这听起来很奇怪，但是如果我点击 cmd+r 来刷新页面，则框保持 0px 样式，但如果我点击地址栏并点击返回，它会正确调整框的大小。不确定这意味着什么，但有助于缩小何时有效，何时无效？！

【问题讨论】：

如果您正在寻找一种纯 CSS 方式，您可能需要考虑这个：stackoverflow.com/a/13353120/1725764

标签： jquery css shopify

【解决方案1】：

将$(document).ready(...) 事件更改为$(window).load(...) 事件，它应该可以工作。

当JS“攻击”时，你的图片可能还没有准备好（没有完全加载）。

在获取所有资源后触发.load()事件。

【讨论】：

这行得通！非常感谢 - 我认为 document.ready 等待资源加载，但现在我明白其中的区别:) 完美。非常感谢。

【解决方案2】：

可能是图片没有加载，等待图片加载

$(document).ready(function () {
    $(".productimage img").load(function () {
        $(".productdescription").height(this.height)
    }).filter(function () {
        //if the image is already loaded trigger the event manually
        return this.complete;
    }).trigger('load');
});

【讨论】：