3

我有一个脚本，可以将窗口的高度调整为 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

的链接 反正有没有优化这个脚本，让闪烁的效果消失？

4

1 回答 1

4

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

您的问题有一个简单的解决方案，为您的 div 提供data-role="content"类名或 id。例如，假设您给它 id = content，那么这CSS将拉伸您的内容 div：

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

底部和顶部设置为 40px 以补偿页眉和页脚。

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

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

于 2013-07-25T22:30:07.223 回答