[Suggestion] Coders- Team up with me: Design loading screen for mobile devices

Here is a suggestion, to which a few coders can work with me on, if you like...

For FAE, of course, I like the way mobile devices look especially with the FAE theme. Why not have a loading screen, as other mobile websites have? It loads for 2-3 seconds at most, and shows the front page afterward. However, what I'm thinking, is that it does not have to be anything more than just general JS/CSS.

Now, I don't code JS, but I do CSS. Now, for the loading screen, here is the development map... real simple seriously:

-Impose loading page only for mobile devices - so recognize user agent immediately and show loading screen (@media tags, and so forth)
-Loading page will show forum logo.
-Once index/portal page loaded, immediately turn off loading screen for the user to view and use immediately. (A loading GIF is fine)

So... What do you think? Worth a try? In my head, I can perfectly see how the JS will be organized, because I've studied theory on it, but I would like some experiments.

I personally love the idea of a loader, and I think the old developer/technician we had on Canvas Forums actually had a landing page and loader set up at some point with an HTML page and the portal..
I did some quick googling for a jQuery loader (since I've used the simple jQuery line loader in some of my mini projects before) and this is what came up: https://www.w3schools.com/howto/howto_css_loader.asp
I haven't tested this out on FM Forums but maybe it'll be possible with an HTML page.. Not sure. If I get some free time to look into it, I will c:

If you are not using the forum's header and footer, you will have to have a link to Forumotion. Is this not similar to a loading page for your forum?

SLGray wrote:If you are not using the forum's header and footer, you will have to have a link to Forumotion. Is this not similar to a loading page for your forum?

Not necessarrly. It can be done in the forum's first page.

Lol... This is to be a dynamic cover using JavaScript, which has nothing to do with HTML pages. I do not wish to deal with HTML pages, due to its issue with compatibility on mobile platforms.

Since it works as a dynamic JS, it would not need any links added except for noscript only (or just hide cover due to noscript), because it will countdown before appearing on the page. Average loading time might be 4 seconds... so load index page in 4-5 seconds.

The idea is to place an animation on the index page that works in conjunction with the index page instead of replacing it, avoiding compatibility issues.

(Forumotion terms of service are incomplete - legally and literally)

Hmm.. interesting idea. Here's a quick mock up :

Code:

$(function() {
  if (!$('#page-footer a[href^="index.forum?mobile"]') || my_getcookie('fa_loader_modal')) return;

  document.body.appendChild(
    $('<div/>')

    .html('<h1>Now loading...</h1>' + document.getElementById('logo').innerHTML)

    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })

    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '50%'
    })[0]
  );

  document.body.style.overflow = 'hidden';

  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';

    my_setcookie('fa_loader_modal', '1');
  });
});

Install it via JS codes management in all pages and it'll show the loading screen below once per visit. Once the cookie expires or is obliterated, the loading screen will show again. That's what you wanted, right ?


Background color is determined by selected theme, and the logo is your forum logo of course. You may need to add the CSS below to your stylesheet to keep the logo from overflowing the modal.

Code:

#fa_loader_modal img { max-width:100%; }

Well, after doing a couple of tests... it did work well. However, one question is that would there be a chance to ensure the loading screen appears before the forum shows...

Onload, forum shows for one second, then the loading screen shows for the remainder of page load time, and then it disappears.

If the loading screen is able to have first priority, that would be nice.

Oh yes you're right.. that's the bane of executing when the document is ready. xP

Let's give ol' document.write a try and see how that works. Use the script below instead.

Code:

(function() {
  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;

  var logo = 'http://i35.servimg.com/u/f35/18/45/41/65/fmd_lo14.png',
      load_text = 'Now loading...';
 
  document.write(
    '<div id="fa_loader_modal" class="color-primary" style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;text-align:center;padding-top:50%;">'+
      '<h1>' + load_text + '</h1>'+
      '<img src="' + logo + '" style="max-width:100%;" />'+
    '</div>'
  );
 
  $(function() {
    $('#fa_loader_modal').fadeOut(function() {
      $(this).remove();
      my_setcookie('fa_loader_modal', '1');
    });
  });
}());

NOTE : Since this is executing before the document is ready, we're not able to collect certain resources, like the forum banner, so you need to insert that manually. I've added two variables to make editing easier :

logo : Place your logo URL in this variable.
load_text : Allows you to change the loading text. ( e.g. Now loading... ) You can use HTML here.

This script is different from the last, it'll fade out the load screen when the document is ready. ( i.e. images may still be loading ) If you want to remove the loading screen when the document is completely loaded, replace

Code: $(function() {

with

Code: $(window).load(function() {

. Doing so will extend the loading screen duration.

Let me know how that works for you.

Well, thanks for looking into this.

Unfortunately, method 2 failed, as it caused the mobile site to hang up. It worked great on the test forum I have FAE on; however, GeekPolice site is the one where the hangup is.

For method 1, it does not seem to show the forum first anymore; therefore, I would say that method 1 "works for me" - if you know what I mean.

Method 1 does look more professional on-screen, even if it is simplistic.

Ah I see, I suppose there's an issue with document.write on mobile. I think the best solution would probably be to poll for the body tag, that way we can insert the loading screen as soon as it's ready. Here's a modification of the first script to include this improvement.

Code:

(function() {
  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;

  var logo = 'http://i35.servimg.com/u/f35/18/45/41/65/fmd_lo14.png',
      load_text = 'Now loading...';

  window.bodyPoll = window.setInterval(function() {

    if (document.body) {
      window.clearInterval(bodyPoll);
     
      document.body.appendChild(
        $('<div/>')

        .html(
          '<h1>' + load_text + '</h1>'+
          '<img src="' + logo + '" style="max-width:100%;"/>'
        )

        .attr({
          id : 'fa_loader_modal',
          class : 'color-primary'
        })

        .css({
          position : 'fixed',
          top : 0,
          left : 0,
          right : 0,
          bottom : 0,
          zIndex : 99999,
          textAlign : 'center',
          paddingTop : '50%'
        })[0]
      );

      document.body.style.overflow = 'hidden';
    }

  }, 1);

 
  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';
 
    my_setcookie('fa_loader_modal', '1');
  });
}());

I included the variables from the second script, since we're executing before the document is ready. Let me know how this one works for you when you get the chance.

P.S.
Thanks for taking the time to test these. I don't have a mobile device to test on, so I can't really test these first hand, other than emulation via PC lol.

*Cool* - So it worked at least 1s quicker... I am glad to test whenever possible. Now... what's *cool* about it, is that once it launches on the Chrome browser on Android mobile, it immediately recognizes the theme color in the META tag (remember that?), and immediately shows the loading screen. So, we have a successful loading screen. 

Third one works best and appears most optimized, even if it only improves it by 1s to avoid showing the forum first. I noticed so many websites JUST RECENTLY started doing the loading screen method, so we're attaching onto a trend immediately.

The other META tag theme color was going on for a few months now; however, I've only seen this loading screen start appearing on many mobile websites (you see my actual job involves looking at loads of websites and taking notes).

I do hope others recognize the loading screen method. The most valuable thing about it, is that if your theme color ("color-primary") is set on the forum itself, the loading screen will show up as the theme color, so it is also personalized, which is something that other companies cannot do, because they don't have their sites skinning colors as FAE sites do.

Ah that is a small improvement then. Overall, I think the best possible solution would be to place the script directly into the template, at the beginning of the

Code: <body>

tag. Doing so will allow you to instantly modify the body without having to wait for it to be ready. This *should* show the loading screen instantaneously without showing the forum.

If you'd like to try this method, delete the script in JS codes management, then proceed to the template.
Display > Templates > General > overall_header

Find :

Code:

<body id="fa_edge" class="color-tertiary">

and place this script directly after it :

Code:

<script type="text/javascript">//<![CDATA[
(function() {
  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;
 
  var logo = '{LOGO}',
      load_text = 'Now loading...';
 
  document.body.appendChild(
    $('<div/>')

    .html(
      '<h1>' + load_text + '</h1>'+
      '<img src="' + logo + '" style="max-width:100%;"/>'
    )

    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })

    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '50%'
    })[0]
  );

  document.body.style.overflow = 'hidden';

 
  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';
 
    my_setcookie('fa_loader_modal', '1');
  });
}());
//]]></script>

Save and publish the template once this has been done.

Note : You wont need to edit the logo URL, since we can use the {LOGO} variable in this template. Let me know how this method works for you.

The ability to change the forum theme is my favorite feature about FAE. Adding the class "color-primary" or "color-secondary" to any element, will allow you to show that element in one of the colors of the theme which is a nice touch.

Okay, upon editing the template, it appears to be improved/optimized by 0.5s more; therefore, that's 1.5s improvement since trial 1.

Overall load time from start to finish is logged:

-wait 1s server response
-show loading screen
-wait 4s server response for page load
-show forum completely loaded

Total time: 5s

Earlier calls for trial 1 was 7s, trial 2 was 6s on test forum (very little extra JS) and hung on my main forum, and trial 3 was 6s.

Trial 4 is the better in overall improvement from 4.5-5s.

Of course, if I offloaded many resources on a CDN, I could optimize it by another 2s probably, but I'm trying to avoid compatibility issues. Does JSDelivr net a good response, or does it stay about the same?

That's probably gonna be the best improvement we can make to the loading screen. We *could* make it better by writing the loading screen directly into the HTML rather than appending with JavaScript, and then remove the loading screen with JS. However, that can pose a problem for noscript, so it's probably not the best idea.

Anyway, I'm not sure about JSDelivr since I've never used it for hosting any resources. Though it couldn't hurt to give it a try.

Excellent! Well, I think we have conjured something that works, especially being careful for noscript.

Hey together,

I tested this last method on Samsung Galaxy S4 Mini but there is no loading screen - maybe the code does not support the S4? I wanted to let you know.

Also, can we do a loading screen for the classic version too?

Regards

Dr Jay wrote:Excellent! Well, I think we have conjured something that works, especially being careful for noscript.

It is indeed a beautiful sight.

Bigtuber wrote:Hey together,

I tested this last method on Samsung Galaxy S4 Mini but there is no loading screen - maybe the code does not support the S4? I wanted to let you know.

Also, can we do a loading screen for the classic version too?

Regards

Hmm.. maybe it has to do with the regular expression that detects your useragent. However, if you want this for the classic version as well, find this line of code in the "if" statement and remove it :

Code:

!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||

I'm not sure, but you *may* need to alter the paddingTop a bit for the classic view.

Ange Tuteur wrote:However, if you want this for the classic version as well, find this line of code in the "if" statement and remove it :

Code:

!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||

I'm not sure, but you *may* need to alter the paddingTop a bit for the classic view.

Hmm... thanks for the tip but there is still nothing to see - I guess I'm doing something wrong.
So I pasted the code right after

Code: <body id="fa_edge" class="color-tertiary">

(see screenshot) and the template is published as well:


Any idea?
Thanks in advance

@Bigtuber this :

Code:

if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;

Should be this :

Code:

if (my_getcookie('fa_loader_modal')) return;

Ok, I changed it.
But this is weird now.

When I cleared my cache and clicked on a link, I got a loading screen (but without logo). The bigger issue is that there is no loading screen after clicking a link for the first time (after deleting the forum's cache).

I tried it now multiple times.
Clear cache: You get a loading screen for the first time clicking on a link. If you click again, there is nothing.

Hmm...

If you want the loading screen to be persistent, completely remove this if statement :

Code:

if (my_getcookie('fa_loader_modal')) return;

and this line of code too, since it'll be of little use after removing the statement above :

Code:

my_setcookie('fa_loader_modal', '1');

The logo is dependent on the logo in pics management. You have one set there, correct ?

Hey,

sorry for the late reply. Had to explore Hyrule.

Thanks, it works now.
But the Logo and the loading text are still not there, and yes, I use this logo:
https://i.servimg.com/u/f35/18/21/41/30/fa_edg15.png (default logo of FAE)

There is just the danube blue as loading screen.
In fact, I would just like to use this one here:

Code:

<h2 class="post-content">
                                                  
   <div align="center">
                              <span style="font-size: 10px;"><em class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></em></span><br /><br />Lädt ... Bitte warten.     
   </div>
</h2>

A spinning circle-o-notch from Font Awesome and a text under the icon.


How to implement this into the loading screen?

It's no problem.

Find this :

Code:

    .html(
      '<h1>' + load_text + '</h1>'+
      '<img src="' + logo + '" style="max-width:100%;"/>'
    )

and replace it with this :

Code:

    .html('<h2 class="post-content"><div align="center"><span style="font-size: 10px;"><em class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></em></span><br /><br />Lädt ... Bitte warten.</div></h2>')

Hm.. still nothing else than my color-primary.
There has to be something wrong, before I changed the html there weren't the logo and text too.

I will give you my current code in the overall header after

Code: <body id="fa_edge" class="color-tertiary">

:

Code:

<script type="text/javascript">//<![CDATA[
(function() {
 
 
  var logo = '{LOGO}',
      load_text = 'Now loading...';
 
  document.body.appendChild(
    $('<div/>')
 
        .html('<h2 class="post-content"><div align="center"><span style="font-size: 10px;"><em class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></em></span><br /><br />Lädt ... Bitte warten.</div></h2>')
 
    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })
 
    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '50%'
    })[0]
  );
 
  document.body.style.overflow = 'hidden';
 
 
  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';
 
 
  });
}());
//]]></script>

Can you please test this to see if it works on ur side?
So I made some modifications on the forum where I want to get a loading screen but I have also tested this now on a fully reinstalled FAE forum.

Sorry Ange, I'm not that fit in JS. But I know that even a little mistake can break everything, so a master has to look it up.

---

Oh, and I wanted to fade the loading screen out. Can we also do a little transition here? I mean maybe a 100-300ms transition that the loading screen is not being disabled so "hard" and quickly.

@Bigtuber give this a try :

Code:

<script type="text/javascript">//<![CDATA[
(function() {
 
 
  var logo = '{LOGO}',
      load_text = 'Now loading...';
 
  document.body.appendChild(
    $('<div/>')
 
    .html('<h2><div align="center"><span style="font-size: 10px;"><em class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></em></span><br /><br />Lädt ... Bitte warten.</div></h2>')
 
    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })
 
    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '20%'
    })[0]
  );
 
  document.body.style.overflow = 'hidden';
 
 
  $(window).load(function() {
    var loader = document.getElementById('fa_loader_modal');

    $(loader).fadeOut(function() {
      document.body.removeChild(loader);
      document.body.style.overflow = '';
    });
  });
}());
//]]></script>

I removed the class ".post-content" from the header, because it was coloring the text the same color as the background. I also reduced the top padding and added a fadeOut.