MyBB Community Forums

It doesn't slow. It only shows the preloader while the page is loading instead of the half-loaded page on screen.

Rest is all in your mind.

(2012-12-01, 07:14 PM)effone Wrote: [ -> ]It doesn't slow. It only shows the preloader while the page is loading instead of the half-loaded page on screen.

Rest is all in your mind.

Technically this will slow your page as it will take even longer to show any content whatsoever. You're also now loading the jQuery API and slowing your site down there too. I'd rather see a half-loaded page then a spinner any day. If your host is also so slow you need this, then you need to upgrade.

Well its just an option. Its totally up to the site owner whether he / she will use this or not.

Just amazing stuff!

(2013-01-08, 10:37 AM)XtremeCoder Wrote: [ -> ]Just amazing stuff!

Thank you

A user recently asked me for help and it turned out this tutorial was what they were having trouble with so I figured I would simply share how I quickly simply got it working for them on latest mybb and ie: jquery 3 as load was depreciated/removed

Global.css

find, comment out and add

body {
	/*overflow-y: scroll;*/
        overflow: hidden;
}

also add:

/** Preloader Spinner by effone and vintagedaddyo **/

#preloader {
  position:fixed; /* These 3 lines will set the preloader area fixed at the top in case overflow fails to hide */
  top:0;
  left:0;
  width:100%; /* Set the size of the preloader full screen */
  height:100%;
  background: #fff; /* If you have applied background image, you may use it. But keep the size as small as possible */
  z-index: 9999; /* Set the position of the preloader above all, greater value is more secure */
}

#spinblock {
  width: 75px; /* The spinner image area. Must be greater than the spinner_big.gif's width */
  margin: 250px auto; /* Align the spinner_big.gif at the middle of the screen */
}

#spinner {
  display: block;
  margin: auto auto;
}

Header template find

		<a name="top" id="top"></a>

Add after:

                <!-- Preloader Spinner by effone and vintagedaddyo -->

                <div id="preloader">
                 <div id="spinblock">
                   <img id="spinner" src="{$theme['imgdir']}/spinner_big.gif" alt="" />
                   <!-- optional lang text to expand upon if so desired later-->
                   <!-- {$lang->ajax_loading} -->
                   </div>
                 </div>

Headerinclude template add *

<!-- Preloader Spinner by effone and vintagedaddyo -->

<script type = "text/javascript" >
    $(window).on('load', function() {
      $('#preloader').delay(1000).fadeOut(400, 'linear', function() {
            $('body').css('overflow', 'visible');
            $(this).remove();
        });
    }); 
</script>

* one can simply modify delay and fadeout milliseconds to your desired needs