Question

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

$( 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样式，但是如果我点击地址栏并点击返回它正确地调整框的大小。不确定这意味着什么，但有助于缩小它的工作时间和不工作时的范围？！

Answer 1

将$(document).ready(...)事件更改为$(window).load(...)事件，它应该有效。

当JS“攻击”时，你的照片可能还没准备好（没有满载）。

在获取所有资源后触发

.load()事件。

Answer 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');
});

jquery设置高度等于图像高度大约50％的时间

2 个答案: