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
Related
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.
This question have been already treated on the internet but i dont find a simple answer.
I would like to load only thoses javascript files and css, before starting to run the body my website.
I'm using packery.js, but when my website appears at first, my divs are misplaced. When i reload the page, everything gets back in place.
Is there a way to say : does all css and js files have been donwload? Yes? Ok run the body.
Thank you
There isn't a lot of information you provided which would help us solve the issue directly, however couple of things...
Make sure all your scripts and styles links are places in the head tags. The HTML page gets rendered in browser Top-Down. I.E. It'll load any files from HEAD tags before the body is reached, same thing if you want your scripts to be loaded after the body is loaded.. just put them at the bottom, before the BODY closing tag.
Using JQuery would be the fastest solution if you wanted to perform some functionality after your page has loaded (I know there isn't a JQuery tag, however thought providing a JQuery answer could be advantageous.
$(document).ready(function()
{
//Document Loaded, Put code you want to execute here.
}
Currently it's advised to load <script> tags as close as possible to </body> closing tag.
I'm creating a web widget ( something similar to the like button of Facebook ) and i was wondering if this is the same case.
<script src="http://localhost/wordpress/?ai1ec_requirejs_widget"></script>
After all this script will load a really tiny script which in turn will bring in everything that's needed for my widget through require.js, wouldn't it be better if it started loading as soon as possible?
It will still work. This is more of a best practice than a technical requirement.
The only things affecting the decision of where to put javascript are
Dependencies / order of execution
Loading time
Best practice (which is largely due to load time)
It's advisable to load large chunks of javascript at the bottom of the page, for example jQuery, however if you load jQuery at the bottom of the page if you have any code with $ above the call to jQuery it will not work as $ has not been defined.
So in your case if it's only a small amount of code, it doesn't really matter so long as it's not being called before any dependencies.
Hope that helps.
Currently I have a fairly complex javascript project and 99% of resources are loaded via yepnope (this includes *.css, *.js). Now after reading this:
http://groups.google.com/group/colorbox/browse_thread/thread/850765cf0d64602a
It appears that Colorbox does some self configuring when the page loads, and it is required to be put within the head of the document so it is loaded before the page. Now I know this is the issue and this would be a simple fix, however I was wondering if there is a way to load it in the body and tell it to configure itself when I tell it to, not when the page loads?
If not, its not the end of the world, but thought I would ask the question anyway.
and it is required to be put within the head of the document so it is loaded before the page
This is not true, put the script anywhere you want. The CSS does need to be loaded though before you execute the script, because it depends on the styles in it.
i am trying to make the preloading work in such a way that the components i wish to preload start to load after successfully loading the page.
for example,
i have index.php. i want it to load up completely.
as soon as it loads up i want to start loading the other components.
to make things clear. i have a nav that makes use of large size images. if i load them along with the index.php file, it would increase load up time of the page. i wish for those large images to load after completely rendering index.php?
am i making sense? is it possible?
Just attach your preloading function to the window object's 'load' event. Load fires after the page (and all external resources) are completely loaded.
This is different from the "DOMReady" event that various libraries like JQuery provide (as in Ivo's answer). $(document).ready(fn) will fire off once the DOM is ready (meaning the complete http document has been received/parsed) but does not wait for external resources (images, css, etc) to download.
Instead, you want $(window).load():
<script type="text/javascript">
preLoadStuff = function(){
//code that does preloading goes here
}
$(window).load(preLoadStuff);
</script>
That will trigger your preLoadStuff handler after all images, etc, are completely loaded.
The images are loaded almost in parallel to the PHP program execution. That is actually depends on the time it takes to execute your PHP program, the speed transfer of the data that you output to the browser etc.
You shouldn't try to load those images after processing index.php, that wouldn't help, because that your server is the one who process the PHP script, while the browser is the one who should fetch the images.
Having your PHP program to output the image tags as soon as possible is good and improves user experience.
I don't think you understand how a webpage works. The index.php file will execute everything it needs before any HTML output even begins processing, which takes mere milliseconds. Then HTML will begin to load everything in the order it appears on the page. The page doesn't wait for the images to finish loading before it displays anything. It will display the outline of the page as it has been loaded so far and as the images finish loading simply insert them into the correct place. It sounds to me like what you want is already the way things work.
$(document).ready(function() { YOUR CODE HERE });
http://api.jquery.com/ready/