Question

我有一个脚本可以将div data-role="content"></div>的高度调整为窗口的高度，减去页脚和页眉的高度。一切运行正常但是当一个页面通过ajax加载到DOM中时，我在设置内容区域的高度时会有一点闪烁

    <script>

      (function() {
        var fixgeometry = function() {
          /* Some orientation changes leave the scroll position at something
           * that isn't 0,0. This is annoying for user experience. */
          scroll(0, 0);

          /* Calculate the geometry that our content area should take */
          var header = $(".ui-header:visible");
          var footer = $(".ui-footer:visible");
          var content = $(".ui-content:visible");
          var viewport_height = $(window).height();

          var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

          /* Trim margin/border/padding height */
          content_height -= (content.outerHeight() - content.height());
          content.height(content_height);
        }; /* fixgeometry */

        $(document).ready(function() {
          $(window).bind("orientationchange resize pageshow", fixgeometry);
        });
      })();



</script>

当它在移动设备上进行测试并且导致我的图像（基于百分比）需要花费一些时间，然后在脚本运行后进行调整时，它真的很明显。这是jsFiddle

的链接无论如何都要优化这个脚本，以免闪烁效果消失？

Answer 1

当 CSS 足够多时，请不要使用javascript，更不用说更快的选项了。

为您的问题提供简单的解决方案，为您的div添加 data-role="content" 类名或ID。例如，假设你给它id = 内容，那么 CSS 会扩展你的内容div：

#content {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 40px;
    left : 0;
}

将Bottom和top设置为40px以补偿页眉和页脚。

工作示例：http://jsfiddle.net/Gajotres/PMrDn/45/

基本上如果在这种情况下不使用javascript，则不会闪烁。当 Google maps API v3 与jQuery Mobile一起使用时，也会使用此方法，如果您需要证明，可以找到 HERE 。

增强javascript以更快地执行

1 个答案: