增强javascript以更快地执行

我有一个脚本，可以将

div data role=“content”>

的高度调整为窗口的高度，减去页脚和页眉的高度。一切运行正常，但当通过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>

（功能（）{
var fixgeometry=函数（）{
/*某些方向更改会使滚动位置保持在某个位置
*这不是0,0。这对用户体验来说很烦人*/
滚动（0,0）；
/*计算内容区域应采用的几何图形*/
var头=$（“.ui头：可见”）；
var footer=$（“.ui footer:可见”）；
变量内容=$（“.ui内容：可见”）；
var viewport_height=$（窗口）.height（）；
var content_height=viewport_height-header.outerHeight（）-footer.outerHeight（）；
/*修剪边距/边框/填充高度*/
content_height-=（content.outerHeight（）-content.height（））；
内容高度（内容高度）；
}；/*固定几何体*/
$（文档）.ready（函数（）{
$（窗口）.bind（“方向更改大小页面显示”，fixgeometry）；
});
})();

当它在移动设备上测试时，它真的很明显，它使我的图像（基于百分比）花费了一些时间，然后在脚本运行后进行调整。这里有一个链接到

---

还有什么方法可以优化此脚本以消除闪烁效果吗？

当

CSS

足够时，不要使用javascript，更不用说更快的选项了

对于您的问题，有一个简单的解决方案，给您的div一个

数据角色=“content”

一个类名或id。例如，假设您给它一个id=content，那么这个

CSS

将扩展您的内容div：

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

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

工作示例：

---

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

谢谢，我以前看过这篇文章，但不知道它是否适用于我的情况。看到JSFIDLE肯定会有帮助。