Too many images causes UIWebView to flash white when loading web page

Question

We're building an iPhone app by basically wrapping a web site inside a UIWebView. We're not using PhoneGap, just a UIWebView to load a mobile app built with jQuery and jQuery Mobile.

If we show more than two images at once, the web page flashes white for a second. If we limit the number of loaded images to two, there is no flash, and the page loads normally.

Does UIWebView have trouble rendering more than X MB in images?

Any clues why?

Answer 1

Probably easier to apply this in the css sheet so it affects all your divs and images. I found it worked wonders for me when I ran into the off-screen rendering issue

 div, img {
    -webkit-transform:translateZ(0);    
 }

Edit:

For the images, change "src" to "data-src" and then add this script to your footer, assuming you are running jquery:

$(document).ready(function() {
    $('img').each(function(){
        var $imgSrc = $(this).attr("data-src");
        $(this).attr("src", $imgSrc);
    });
});

This will make it so the images load once the raw body code has loaded, which will take less than a second, and should hopefully prevent the white flash problem.

Answer 2

No clue why this worked, but capping the page height at 460px (iPhone app) eliminated the flash. Maybe some conflict with JQM and setting of the height?