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?

Is it a number of images problem or a size problem ? Did you notice that ? — adriendenat
There are five total images, none is > 500 KB. The smallest is 130 KB. — Crashalot
have you set it to use hardware acceleration to render your images and content? it usually helps — CoreyRS
@CoreyRS, yes we applied hardware acceleration to the parent container. Do we need to do it to the image element as well? — Crashalot

CoreyRS CoreyRS · Accepted Answer · 2012-07-24T22:54:07

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.

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

2 Answers