javascript - 正确的页面事件以使用Jquery Mobile修改CSS

页面准备好后，我想动态更改div高度。 （document.ready）。那么我应该在Jquery Mobile中使用什么正确的页面事件？

尝试了pagebeforeshow和pageshow事件。

Pagebeforeshow事件

$(document).on 'pagebeforeshow', ->
  page_id = $.mobile.activePage[0].id

  if page_id == "brands"
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(->
      $(this).height()
    ).get())

    $(".product-image").css("height", maxHeight)
    $(".circle-container").css("height", maxHeight)

maxHeight返回0

页面秀活动

$(document).on 'pageshow', ->
  page_id = $.mobile.activePage[0].id

  if page_id == "brands"
    maxHeight = Math.max.apply(null, $(".product_descriptions").map(->
      $(this).height()
    ).get())

    $(".product-image").css("height", maxHeight)
    $(".circle-container").css("height", maxHeight)

maxHeight将返回正确的值。

尽管pageshow事件返回正确的值，但所有元素将首先显示，然后仅触发.css函数。我可以看到触发了.css事件，并在移动设备上看起来很奇怪（屏幕弹跳）。

是否有解决方法？

最佳答案

在“ pageshow”和“ pagehide”事件中更改css看起来很奇怪，是的，因此您陷入了“ pagebeforeshow”事件。
首先，如果您使用早于1.7.1的JQuery并尝试获取未隐藏元素的尺寸，则应该尝试使用较新的JQuery。
如果这没有帮助，或者您尝试获取隐藏元素的尺寸，则可以尝试一些奇怪的技巧，例如：

 // object is JQuery object (e.g. $('#myId'))
 function getRealHeight(object)
 {
     var clone = object.clone().show().css({'visibility':'hidden'}).appendTo('body');
     var realHeight = clone.height();
     clone.remove();
     return realHeight;
 }

即使对某些元素它返回的尺寸不精确（例如，用216代替最终的232），这对我也有效。
此黑客的其他一些版本：jQuery - Get Width of Element when Not Visible (Display: None)