问题
I have built the following as test scenario: http://dev.driz.co.uk/Spinner/ for a webapp that will run on an iPhone Chromeless. If you open it up on your iPhone and add it to your homescreen you will see it as a full-screen web app complete with startup screen and preloader.
I have made the startup screen and first screen that the user will see the same as per the Apple documentation quoting: "Generally, design a launch image that is identical to the first screen of the app. Avoid including elements that might look different when the app finishes launching, so that users don’t experience a flash between the launch image and the first app screen."
As stated above, I have made them the same to prevent the flash that can happen between the startup and the app itself (usually due to different UI components, of which my don't change on startup). However I still get this flash! It's as though the app is showing the startup and then hiding and then showing the website which includes the showing the splash screen with the startup image again.
Any ideas on how I can combat this? I have even tried setting the html/body itself to have the background image of the startup screen but their is still a flash as it loads in. Also tried using an actual image instead of background, but again same issue.
回答1:
Ok. Quick answer: Don't use the ios startup image imo, because it just shows very unrealiable and outside of ios you can't use it anyway. I don't know how long I tried to get a decent image to show and once you are talking different devices and formats it's just nasty with all the images you have to provide.
I have done a css/javascript splash screen, which I'm using for my own application (for example here). You can specify a portrait and landscape image (in 4 sizes) which get loaded depending on device.
The background is attached to the splash class, which I'm setting on the body and removing once the app has loaded.
I have put the code inside a repo on Github. Feel free to use. If you have any questions, let me know.
回答2:
I am betting that the flash you are seeing is the background of the window, or your webview. It is most likely white, and when the app loads, it doesn't render the page immediately, so for a split second you see the white background of the window.
I would try editing the _window.backgroundColor (i'm guessing that property name) on your app delegate or in Interface Builder, and if that doesn't fix it see if you can edit the webview's background color. All may be dependent on whatever toolchain you are using to create the webapp (i.e. phonegap)
回答3:
I do know that putting a loading image is true for the native app, but no where on the document you linked says it is true for web app as well.
回答4:
Did you find a solution? I've found the problem is fundamental to the iPhone, regardless of your app.
Take this for example: it shows a website with a background of #ccc with a splash screen 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 flicker while the app loads.
Faster loading apps feel worse, slightly epileptic, with the flicker. And if the splash screen is dark, it looks worse again.
来源：https://stackoverflow.com/questions/15075958/getting-flash-between-startup-screen-and-preloader-on-ios-webapp