All geek questions in one place

JQuery Mobile screensaver for all devices

How can I display a splash screen in my jQuery mobile application until the main scripts have finished loading?

I know that on Apple devices you can add something like this:

<link rel="apple-touch-startup-image" href="img/loading-splash.png">

I would like something similar, but it works on all platforms. I don’t want to display the body until all the main scripts load, because it looks ugly. Perhaps there is an alternative to putting all the scripts in the head that achieve the same goal?

+4
source share
1 answer

Check out any of the following links:

Both of them will tell you that running apple-start-image will only work on iOS devices (and it’s not so easy to get them to show too).

I think it will take some time until the pop-up screens are available on different platforms.

In the meantime, I use this in my page:

 <script type="text/javascript"> (function(){var a;if(navigator.platform==="iPad"){ a = window.orientation === 90 || window.orientation === -90 ? "FULLPATH-TO-landscape.jpg":"FULLPATH-TO-portrait.jpg" } else { a = window.devicePixelRatio === 2 ? "FULLPATH-TO-retina.jpg" : "FULLPATH-TO-startup.jpg" } document.write('<link rel="apple-touch-startup-image" href="'+a+'"/>')})() </script>

Of course, you can also write plain HTML, but I found this fragment somewhere in the Mobile Boilerplate , the author claims that all provided splash sceens will be downloaded on all devices. With this script, you get only one image with a splash screen and save 3 HTTP requests and upload unnecessary images.

+3
source

Source: https://habr.com/ru/post/1401308/

More articles:


All Articles