Preloader script not working on mobile devices

First off, this is my first post in the forums. Not sure if this is right place for a jQuery issue - though I couldn't locate a more specific forum. So I apologize.


I'm using a preloader to display while all elements on a page are loaded. It works fine in every screen resolution, except on mobile devices, including iPad devices. Not sure why.
I simply place this in the footer:

<script type="text/javascript">
//<![CDATA[
    $(window).load(function() { // makes sure the whole site is loaded
        $("#status").fadeOut(); // will first fade out the loading animation
        $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
    })
//]]>

Code (markup):

And use this in the css:

#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:199; /* makes sure it stays on top */
 
}
 
#status {
    width:200px;
    height:200px;
    position:fixed;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(framework/images/loader.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

Code (markup):

Works great in Safari, Chrome, Firefox, etc., but it doesn't seem to work in mobile devices. The css displays fine, so the preloader is visible, but the script doesn't seem to activate and all I see is the preloader. Any idea?
Thanks!

 

Can we see the actual site in question? Snippets are cute, but don't really tell us the whole story.

That said, my advice is rip that stupid malfing jquery for nothing crap that just makes the page take longer to load out. Stupid fade-in/fade-out garbage on pageloads does NOTHING to help the user get at the content, and is nothing more than a total waste of bandwidth and time. It falls squarely into the type of "gee ain't it neat" nonsense that is little more than throwing code at a complete non-issue. If you have enough **** on the page for this to be an improvement, you probably have something massively wrong with the site! (like too much scripting, too many images, too many objects, presentational images in the markup, etc, etc).

Though without seeing the site in question, it's hard to say how much of a non-issue it is.

 

Hey,

I see what you're saying. Makes sense. It's a WordPress theme in development. I may just not use it, as you suggest. The site url is http://themes.siiimple.com/shift/

Thanks for any ideas about it.

Thanks
Justin

 

ooph, yeah, that's bad. I'd advise against using that from the half a minute it took to download here -- said painfully long load time easily enough blamed on the endless javascript for nothing and jquery bloat. It's 239 separate files totalling over 3 megabytes, TEN TIMES the upper limit I generally allow for the number of separate files and more that twenty times the total size of all files. The thirty separate scripts (ouch) and twelve stylesheets (sent to "all" defeating the point of using CSS) is a train wreck of half-assed garbage ... and that's before we talk the typical turdpress bloat since they didn't neuter out all the endless pointless 'classes for nothing' WP shoves down your throat. 103k of markup to deliver 8.8k of plaintext and 41 content images is likely four to five times as much code as should have been used.

Though again, that's typical of most off the shelf CMS, where you have to bend the entire software over the table and make it your ***** to do anything useful with them... Which instead of gutting it down, this theme just keeps throwing more code at it because that SO helps deliver content to the user.

 

Ha, ha. Yes, that's true. Much of the site itself can be parred down, though it's in development. WordPress can be bloated, no doubt, but people buy WordPress themes (a lot of them), so though it may not be the most efficient process or platform, it's worthwhile because the it earns me a much needed income. Still befuddled why the loader works on all browsers and devices except mobile but I will continue searching. Thanks for your input!

 

Where is it in the markup? Also, the scripting could be failing or blocked... Part of why I'm not a big fan of jquery... ESPECIALLY since it's basically using scripting to do most of CSS3's job.

I mean, I can do the same thing WITHOUT jquery a LOT cleaner... though it relies on some CSS3 that no polyfill will provide so IE8- is 'right out' in terms of the fade-out (though it will still hide and show). I'm trying to figure out what it needs the extra DIV for, where it is in the scripting/markup (I'd add that div with the scripting so that if scripting is off the page loads normally), etc, etc...

I mean ALL that should be needed for CSS is:

#preloader {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#fff url(framework/images/loader.gif) center center no-repeat;
	z-index:199; /* makes sure it stays on top */
}

#preloader.hide {
	opacity:0;
	left:-100%;
	transition:opacity 1s, left 0 1s;
}

Code (markup):

and this for scripting:

var newDiv = document.body.insertBefore(
	document.createElement('div'),
	document.body.firstChild
);
newDiv.id='preloader';
newDiv.loadHide=function() {
	document.getElementById('preloader').className='hide';
}
if (window.addEventListener) {
	window.addEventListener('load',newDiv.loadHide,false);
} else {
	window.attachEvent('onload',newDiv.loadHide);
}

Code (markup):

I'm a firm believer in letting the CSS do the heavy lifting rather than relying on some fat bloated garbage scripting library to do it. This should work just fine on pretty much all modern devices -- desktop and mobile. IE8/lower don't get the cute fade-out animation, OH WELL.

If you REALLY want to do that with the fatass needlessly cryptic jquery nonsense, I THINK it would go something like this (been YEARS since I dealt with that train wreck of asshat BS) using the same CSS.

$('body').prepend('<div id="preloader"></div>');
$(window).load(function() {
	$('#preloader').addClass('hide');
})

Code (markup):

Not 100% sure on that though, JQUERY really isn't my thing, I only learned enough about it to realize it was a complete and utter waste of time. 99% of what jquery does IMHO could be handled by a simple class swap and/or letting CSS do the real work... though MOST of it is garbage I'd not put on a website in the first place. (like say... this code)

 

Hey,

Thanks for your help and advice. Looks like this will work - and I will think whether it's something worth offering. The divs were in the header.php file - just after the opening body tag. I'll have to read through your other posts , since it seems you know what you're talking about