Delaying the css animations with a preloader? - javascript

I currently have a website which uses Animate.css on the frontpage (https://daneden.github.io/animate.css/). How it currently works is that the animation kicks in as soon as the user opens the website, but this causes the animation to "lag". What I would like is to let it wait until the full page loads in before the css animations start to do their thing, thus making the experience much more fluid.
I've looked into several js based preloaders, tried some but it doesn't delay the css animations. As soon as the page is finished loading, the css animations have already been completed. Am I doing something wrong, or are JS preloaders not the right approach?

You would have to use javascript and/or jquery to dynamically add the css class that has the animation to the desired element after the page has been loaded. We can do this with the $document.ready event in jquery.
$(document).ready(function(){
$('css selector').addClass('class-that-has-animation-binding').
});
That is how he is doing it on the main site if you view is source code.

The above approach didn't work for me.
Since a good preloader will wait until ALL page elements, including images, have been displayed, I would wait until then....
$(window).load(function() {
$('css selector').addClass('class-that-has-animation-binding').
});

Related

jQuery Loading Animation is not hiding on page is Loaded or shows delay when i use some other approach

I am using jQuery to a simple task. Task is to simply show a loading animation from none progress until page is completely loaded.
The thing i am experiencing is that the animation shows up after 50-75% time and then goes hidden after the page is completely loaded (I am referring it as delay in next parts of question).
Points to note:
-> If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).
-> If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.
I want to know the reason why my page is doing this behavior, what is the best approach of doing this task. (I know my approach is not the best one since its misbehaving)
Note: My main page includes both header.php and footer.php files.
My Question ends here.
This is bootstrap loading animation. (Working Fine. No problem with it. Just to show)
Animation Code
<div id="Loading">
<div class="spinner-border m-5" role="status" >
<span class="sr-only" >Loading...</span>
</div>
</div>
And this is what i function i am using for for hiding the animation on page is completely loaded. (Also Working Fine. No problem with it. Just to show)
Script
<script>
$(document).ready(function($) {
$('#Loading').fadeOut("slow");
});
</script>
document.ready() means your DOM is ready to run if your page have bulky contents and added js at the bottom to load dom its taking time so loading animation comes in delay. And at header make sure jquery is above the custom CSS. If you have not satisfied with the answer edit the question and add complete HTML markup.
I have found the mistake. The thing that was making the animation to load after some time was that, before animation's code I linked bootstrap CDN and then animation's code. That why it took longer than expected.
The thing I learned is that, it was a bad approach to use bootstrap for loading animation(the animation that shows the page is loading). Instead, CSS and HTML for animation should be used. Mainly using any library at your website affects the speed of the website that is not good for SEO.
You experienced two different scenarios. Let me clarify them one by one:
1. If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).
You said you're inserting Bootstrap before the Animation Code, so it may take time to load. I will re-iterate your words: yes, it's best practice to avoid any framework or library (like Bootstrap or jQuery) for adding page-loading animation. It's because progress bar should be the first to load and show, and it will delay if browser need to load heavy files like third-party libraries. Well, there's a solution as well:
You can also load a script asynchronously using the HTML5's async attribute for <script> tag. But then, you can't use Bootstrap in Animation code. The reason being, Bootstrap may be loaded later than your Animation code being rendered. Read: https://www.w3schools.com/tags/att_script_async.asp
<script async src="myScript.js"></script>
2. If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me). For both in footer.php it gets hidden but shows delay.
You said you're adding jQuery file at the end of <body> in footer.php, so your script when placed in header.php doesn't run since jQuery is still not loaded. Check console log; there will be an error.
You must first load jQuery, then use it. Read: https://forum.jquery.com/topic/and-jquery-not-defined-problems
Also, if you seek to hide the progress bar after all the resources (like images and iFrames) are loaded, then use $(document).load() in place of $(document).ready(). $(document).ready() is fired when the DOM is ready, but $(document).load() is fired when the page is loaded.

(document).ready functions have visible delay on page load

I have an element that has a class added to it on page load, via jQuery
jQuery(document).ready(function(){
$('.service_info_container').addClass('hide');
});
The class applies display: none; to the element, the issue I'm facing is that on page load, for a split second you see the element and then it disappears as the class is added it to, but I can't figure out why there is this delay. I have made sure my jQuery library and JS file are added before my stylesheets in the header, but it makes no difference. The staging site this occurs on has no form of script defers or similar optimizations.
It's my understanding that using jQuery(document).ready should fire right away once the script is loading in the DOM, or am I wrong and it needs to wait for other things like all images being loaded first? I acknowledge there are other approaches I could take but I really want to know why this one presents this issue. Thanks for any help in advance.

Load order of js files

I can't seem to get the preloader (Query Loader 2) to load before everything else on the page.
When I refresh the page the images in the full screen slider display block down the page, then the query loader starts.
Is there a way to start the preloader before everything else on the page?
I use stack overflow alot and normally find the answer to my question but with my limited knowledge of javascript this one has got me stumped. Things I've tried:
Putting the call to queryloader2 right at the top of the page in the header.
Putting the call to the slider scripts at the bottom of the page so they load after the preloader.
Changing the z-index of the preloader to higher than the slider.
jQuery.getScript() which loaded the scripts in order but the slider still displayed block down the page and then the preloader started.
I'm thinking its to do with the load order but if you have any ideas as to what I'm doing wrong here your help would be much appreciated.
I've put a link to my site as I didn't know which piece of code to put on here and so you can see the way the preloader and slider load the wrong way round http://stavriaphotography.com
The site is quite heavy on external scripts. Here's how loading resources in browsers work:
Images are loaded asynchronously, this means browser doesn't wait for the image to load before continuing further down the DOM, however
JavaScript is loaded synchronously and you can not load the next one before the previous is loaded.
jQuery $(document).ready() function fires only when the DOM is completly loaded.
Here's what going on, on your site:
You load jQ and queryLoader in the head and prepare to call it when DOM is ready. The scripts in the footer take time to load and are delaying the $(document).ready() function call. In the mean time you have images in your body and since they are loaded asynchronously the browser begins loading them before the queryLoader is ready to execute.
The most simple solution in your case would be to move all the external scripts to your html header, however not a very practical one.
I'd suggest reading up a bit on JavaScript and splitting up you site into multiple files for faster loading.
Some pointers: jQuery.ajax() and Handlebars.js or if you really want to go crazy dive into Backbone.js with RequireJS for asynchronous javascript loading.
Hope this helps!
Put Jquery Library first
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
then add your other JS files

What is the cleanest way to disable postback controls until the page has fully loaded?

I have a website that has some intense graphics, and people with slow connections might require download time. While their browser is downloading, they have form options. And a lot of times they will fill the form out and hit submit.
This causes an event validation issue, because the page wasn't fully loaded. I can think of a lot of ways off the top of my head to fix this. I could go back and disable every single control, and then write javascript to enable these controls clientside when the page is loaded.
I also looked into blockui, but it will block the whole page or just a div. I am looking for something I can stick in my masterpage and forget about it.
Any ideas?
It seems like the correct approach would be to load in your intense graphics after-the-fact, so that users can still submit forms as soon as the critical DOM elements are rendered. (I'm assuming it's not vitally important that all the images be loaded before the form gets submitted?)
You could do this fairly easily by causing your images to be loaded as CSS-based backgrounds on div and body elements, based on a specific class, like this:
body.loaded {background: black url("http://us.battle.net/sc2/static/images/layout/body-bg-baked.jpg") center top no-repeat;}
Then have the following code to add that class after the page loads:
$(window).load(function() {$('body').addClass('loaded');});
It shouldn't produce any significant slow-down in the loading of the images, but it will allow all your page's DOM elements and javascript to run while those images are downloading if necessary.
(jsFiddle example)
I couldn't explain the answer myself. But I think this has the gist of what you need to do.
http://www.telerik.com/community/forums/aspnet/ajax/disable-or-gray-out-page-when-displaying-loading-panel.aspx

Twitter social box delay page loading - how to async it?

Twitter generates me box code to insert on page: http://pastebin.com/5TgkL5vP but on slow connection it prevent page from loading. Is there any way to add "Loading..." and make it async? (I know about iframe but its awful way)
There is a solution in here;
http://od-eon.com/blogs/stefan/asynchronous-loading-twitter-widgets/
$(window).load(function(){
$.getScript('http://widgets.twimg.com/j/2/widget.js', function(){
$.getScript('/media/js/twitter.js', function(){
$('#twtr-widget-1').appendTo('#twitter_p')
})
})
})
To delay the loading of the twitter widget you could load it after your whole page is loaded. You could use the window's onload event handler to start loading the twitter widget once your page has been downloaded.
Or you could use a javascript library (like jquery) to run that code once you HTML is loaded but images and CSS and other assets are still loading: jquery's .ready() method does just that.
In case you don't want to use bare javascript (although recommended for learning) jquery (like others) does provide a .load() event that behaves just like the onload example on W3c.
In any case, with any of those two methods you could place a "loading..." text in a placeholder and then replace it with the widget once it's loaded.
You should try experimenting with both and see which one produces the best perceived results. Sometimes you want the page's content to load blazingly fast, in that case you should hold all external content from being loaded until the content is loaded (using onload or .load()), while sometimes you want everything to be loaded more or less at the same time (using .ready()).
I hope it didn't come out backwards :D.
The solution explain by od-eon.com is OK but for IE the CSS is not correctly added because it tries to add CSS in a window onload event. This event is fired asynchronously so no CSS is added.
The line $('#twtr-widget-1').appendTo('#twitter_p') is not useful.
You must not add a CSS position attribute to the div which will contain the box because nothing is displayed in this case. If you want to add this box in an absolute div you must add an empty div in it and pass the div's id in parameter.

Categories