javascript - 增强javascript以更快地执行

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 = content，那么这个 CSS 将拉伸(stretch)您的内容 div:

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

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

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

基本上这种情况下如果不使用javascript是不会出现闪烁的。当 Google maps API v3 与 jQuery Mobile 一起使用时，也会使用此方法，您可以找到它 HERE 如果你想要证明的话。