White flicker between launch image (splash screen) and app homepage

后端未结

关注

 3  543

I have a very simple HTML5 iPhone web application that works almost perfectly; there is only one issue: between the launch image and the app homescreen, a completely white s

相关标签:

3条回答

情话喂你

2020-12-10 15:45

CSS selectors are pretty slow on iOS (greedy CSS reset scripts have terrible performance too).

Head initiated javascript self loading DOM-ready scripts and CSS selectors running together compound the issue further. As you have both CSS and javascript requests in the head, there is a small but appreciable delay processing the body, especially the body's background colour.

Most HTML5 frameworks are moving to deferred script loading. As a minmum you want to get the stylesheet loaded first and worry about javascript second. Try putting the css at the top and scripts at the bottom, then inlining a default background colour (not image - there's an appreciable delay on iOS 5 rendering scaled background images and CSS gradients).

You can also try the async attribute on iOS5+, but I haven't tried it myself.

Hope this helps :)

0 讨论(0)
发布评论:

提交评论
- 加载中...
轻奢々

2020-12-10 15:45
Alright, seems like a basic and annoying problem. I think the best way to tackle this would be via AJAX (Asynchronous JavaScript and XML). I'm sure you probably already know what this is, but it's just a way to basically send a request from JavaScript for a file elsewhere and then load it into the page or parse it however you wish.

A little more advanced approach

For your example, I recommend you comment out the line of CSS that has the background-image like this:
```
.bg-container {
    /* background-image: url(img/bg.png); /* commented out */
}
```
Note that the second comment just makes it easier to comment and uncomment the one line while debugging your code.

Now just add a simple img tag to your body, and make the src of it an ajax loader (you can find the spinning wheel generators anywhere). From here you can write some JavaScript to load the image, get rid of the spinner, and replace it.

Two simpler approaches

This solution doesn't appeal to me, I don't think most people would like it anyways. That's why I use 'Bootloader.js' which is a little AJAX loading tool I wrote a couple of months ago to help people with these sort of problems.

It's easy to use, aside from the script include, just add this meta tag:
```
<meta name="bootloader" content="enabled,forms('selectorOfForms'),a('selectorOfAnchors')">
```
The forms and anchors is optional, if you use it, it will make all your forms and links asynchronous (not for cross-domain use yet). The forms are not easy to setup, you can read the documentation on that if you would like.

Finally, set up your body like this:
```
<body>
    <div id="body">
        
    </div>

    
</body>
```
And there you have it, this will handle everything for you.
Final suggestion
If you don't like any of these options, or want a limited yet customizable option, I recommend you use Image LazyLoader by Mika Tuupola (included with Bootloader.js) and also available at: http://www.appelsiini.net/projects/lazyload

Tell me how it goes, and what you use! XD
0 讨论(0)
发布评论:

提交评论
- 加载中...

庸人自扰

2020-12-10 15:45

This problem occurs with even simple sites.

Take this for example: it shows a website with a background of #ccc with a splashscreen of #ccc for the iphone 7.

<!doctype html>
<html style="background-color: #ccc;">
<head>
  <title>iOS web app</title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-title" content="iOS web app">
  <meta name="viewport" content="initial-scale=1">
  <link href="https://placehold.it/750x1294" media="(device-width: 375px) and (device-height: 667px)
                 and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
</head>
<body style="background-color: #ccc;">
  <h1>iOS web app</h1>
</body>
</html>

https://imgur.com/a/tGiREVM

You can see a white flicker while the app loads.

Faster loading apps feel worse, slightly epileptic, with the white flash. And if the splash screen is dark, it looks worse again.

0 讨论(0)

White flicker between launch image (splash screen) and app homepage

A little more advanced approach

Two simpler approaches