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

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 screen appears (i.e. flickers) for about one second.
I'm downloading the app to my phone from the web by using the "Add to Home Screen" button. The javascript file (functions.js) and stylesheet are both very small files.
Has anyone had this problem? Are there any ways to work around/fix it?
index.html
<!doctype html>
<html manifest="demo.manifest">
<head>
<meta charset="UTF-8">
<title>HTML5 Application</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon-precomposed" href="Icon#2x.png" />
<link rel="apple-touch-startup-image" href="Default#2x.png" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>
<body>
<div id="wrapper">...</div>
</body>
<script type="text/javascript" src="function.js"></script>
</html>
demo.manifest
CACHE MANIFEST
index.html
Default#2x.png
functions.js
style.css
.htaccess
AddType text/cache-manifest .manifest
EDIT #1: I have done some more research and came upon this answer:
Clearing the screen and other artifacts while rendering is a common issue of HTML rendering due to the progressive nature of HTML. The concept is that the browser should draw as early and often as possible and render styles/scripts/content as they become available. It's possible the markup has an issue where all rendering is delayed until some content or a script is available.This could happen if:
You have dynamic heights based on image dimensions but you haven't
set the image dimensions in the markup or CSS.
Your layout is based on tables and you aren't using 'table-layout:fixed` in CSS.
Your HTML uses inline scripts with document.write().
You have some kind of onLoad() function that reveals/modifies content.
You link to an external stylesheet.
You're using uncacheable external content or you've disabled caching.
You're using external content that's returning 404 or isn't available offline.
I have followed all the suggestions in this answer, but it does not rid my web app of the white flicker. Are there any hacks to get around this issue?
EDIT #2: I have tried using no Javascript and a stylesheet with only:
body { background-color: black }
But there is still a white flicker. Since this appears to be an issue with all web applications like this, my question is: Are there any hacks to work around this issue?

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 :)

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">
<!-- All the content should go here -->
</div>
<!-- This will disappear on first ajax load -->
</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

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.

Related

How detect smartphone screen and show webpage

I'm creating a webpage and I want create a version for smartphones.
I found information about this, but using a media-query with max-widht.
The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6"
How can i solve this?
Thanks
Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp
What you need is to make viewport responsive by adding meta viewport tag to your pages head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I agree with #StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.
But if you can't then there's 0 doubt, just use the solution that StaXter said.
Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.

Is it possible to have different meta tag to render CSS and a different meta tag to render javascript?

I have an desktop application which is using ie7 engine to render and now We are updating it to ie9 only.
To get CSS3 support We update existing meta tag <meta http-equiv="X-UA-Compatible" content="IE=7" /> to <meta http-equiv="X-UA-Compatible" content="IE=9" /> and it's working fine.
But an issue application has plenty of java script file which written based on ie7 render engine, that's why it's throwing many run time errors. it'll take a lot of time to fix.
So, Is there any way which can force all java script to use ie7 meta or engine while rendering?
Any help would be much appreciated...

Does it Make Sense to Insert the Google Content Experiements Tag after <meta> tags?

Google instructs us to put the Content-Experiments JavaScript immediately after the <head> tag.
Does it make sense to actually insert it a little later than that, such as after some key compatibility <meta> tags, like:
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;" />
<!-- Other important tags? -->
<!-- Google Analytics Content Experiment code -->
...
... or is it totally and absolutely best to put the JavaScript above all else?
This should be fine, so long as it's not nested within any other tags. It's the same case with the GTM snippet - ideally it should come immediately after the <body>, but often there are other meta tags the come before (and that may be loaded dynamically). Just make sure you validate the code after you've pasted it in on your site.
Google instructs you do place the experiment snippet as early as possible in the page because content experiments redirect to the variation pages. If you load assets before the experiment code there might be an unpleasant delay before the redirect starts.
I can for the love of my life not image that meta-tags would delay a js redirect, so you should be fine. I image Google found it easier to say "always on top" than "always on top except for tags that do not delay javascript executions (such as e.g. meta tags)".
Having said that, there is no benefit from having meta tags first, so you might as well put the experiment code first.
I found a specific case where it is actually very important to place the Google Analytics Content Experiments stuff AFTER certain <meta> tags.
I use a "dynamically triggered" Content Experiments, and thus, leave a great big JS block at the top. However, that block MUST come after <meta http-equiv="X-UA-Compatible" content="IE=edge" /> (or whatever IE version you like). The consequence of having Content-Exp after the <meta> tag is that IE will drop down to old-school corporate compatibility mode (IE7 behaviour) when navigating to websites that are incorrectly believed to be part of the Local Intranet zone.

Image Loading on Mobile CSS/HTML

I have been editing a web page, some CSS/HTML (didn't start to code from the beginning just edit)
My website works with all browsers right now, the problem is half of the images does not upload on mobile. I have put a screenshot.
Here is my code http://jsfiddle.net/2gj9b2ub/
I've been reding these media queries but it seems I have to re-write the all CSS for that? The site is not a mess just image uploading problem so maybe I can fix with something else.
Thanks for the help.
So I found a solution after few research,
I just entered this one line of code <meta name="viewport" content="width=device-width, initial-scale=0.33, maximum-scale=1" /> into head section, adjusted scale and it worked. It doesn't work as good as like bootstrap or a code for designed for mobile, but it fixed.
Thanks for help.

HTML Link to another page does not execute javascript or load CSS

I have several HTML pages running Javascript and JQuery Mobile, and I want to link to them from another HTML page. My link is setup as:
Hours
and the linking page and the pages being linked to are in the same directory. However, when I access the page through this link, the JQuery Mobile theme is loaded, but any additional CSS changes or any Javascript code doesn't execute. I have several methods set to run on startup, but none execute, not even a simple alert.
When I attempt to access the page directly, everything applies properly and my code executes, but when I try to access it through my HTML link, none of it works. Is there something I am forgetting?
Thanks!
Edit: None of the code is working for any link I link to. Even a simple:
$(document).ready(function(){
alert("Hello world");
});
does not work. I have this added into the other HTML page as:
<head>
<meta charset="utf-8">
<title>Hours</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" rel="stylesheet">
<script type='text/javascript' src='https://cdn.firebase.com/v0/firebase.js'></script>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
alert("Hello world");
});
</script>
<style type="text/css">
* {
font-family: "Celeste Mobi Pro", Celeste, serif;
}
</style>
</head>
Neither the CSS font change nor the startup alert works. I've tried this on other HTML pages, so I think it might be the server I'm hosting it on, but I'm not sure.
Second Edit: I just tested it locally, and it works. I'm fairly certain it's the server right now, is there anything I should check?
Third Edit: I've been using the Chrome console to look at the javascript source on the pages being linked to. I have all scripts added through script tags in the head, but for some reason, none of those appear. Rather, the contents of the script tags are those from the page linking to them (and yes, I'm making sure that I'm checking the for the new page, not the old page). When I refresh the page, however, it updates and it seems to work.
According to every data that you provide us, what you are telling us should work. There's no flaw in it.
The only possible error that you may encounter may be that you are using two differents hours.html, and accessing the wrong one through your link.

Categories