增强JavaScript执行速度更快

我有一个脚本，它将div data-role="content"></div>的高度调整为窗口的高度，减去页脚和页眉的高度。一切都正常运行，但是当一个页面通过AJAX加载到DOM中，我得到一点点的闪烁，而内容区域的高度设置增强JavaScript执行速度更快

<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>

它真的noticible当其在移动设备上进行测试，它引起了我的图像，基于百分比，需要片刻，然后在脚本运行后进行调整。这里是jsFiddle

的链接有无论如何优化这个脚本，以便闪烁的效果消失了吗？

来源

2013-07-25 mhartington

不要使用javascript当CSS是不够，更不用说更快的选项。

有一个简单的解决方案，为您的问题，给你的div与data-role="content"一个类名或ID。比如可以说你给它的id = 内容，那么这个CSS将舒展你的内容的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如果您想要证明。

来源

2013-07-25 22:30:07 Gajotres

谢谢，我之前看到过这篇文章，但并不适用于我的情况。看到JSfiddle明确表明它会有所帮助。 – mhartington

增强JavaScript执行速度更快

回答

相关问题