I have a script that adjusts the height of the div data-role="content"></div> to be that of the window, minus the height of the footer and header. Everything runs fine but when a page is loaded via ajax into the DOM, I get a little flicker while the content area's height is set
<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> Its really noticible when its tested on a mobile device and it caused my images, which are percent based, to take a moment, then adjust after the script has run. Here's a link to jsFiddle
Is there anyway to optimize this script so that the flickering effect is gone?
