Minor problem while loading page with jquery - javascript

I'm using the slidedeck jquery plugin which basically puts slides on my page. Everything works fine, but the problem is with the css loading part. Below these slides i have an import statement for another page. This page which i'm importing fetches quite a bit of data from the database before being completely displayed.
So whenever i open my page for a second or two the display for my page goes hay wire. The probable cause of this may be that i'm putting most of my jquery including the one for these slides in the document.onready function. So since the document is not loaded completely for that period of time slides are also not displayed. (as in they are displayed but in a weird manner......they are all over the page!!!!)
Is there some way i can make sure that my css and jquery get loaded first and then a call is made to this page which i'm importing or something like that. i just want that my display comes fine right in the beginning.
this is the slidedeck jquery plugin i'm using
slidedeck : http://www.slidedeck.com/

ahh i actually found a solution for my problem. Now what i'm doing is that i'm keeping the div (say id="slideDeckContainer") containing this slidedeck initially as hidden (using css style=display:none). Only after the page is done loading inside the $(document).ready(function(){....}); i call $('#slideDeckContainer).show(); on the div. (since the $(document).ready(function(){...}) is callled only after the page is loaded)
Definitely not the best solution but for now it works :).

instead of $(document).ready(function() { //code here }); you can use $(document).load(function() { //code here}); The load function fires after everything in the selector has loaded. In this case, we are selecting the document, so this function will run only after the CSS, javascript, and DOM have finished loading. Another suggestion is to give the DOM elements that you are loading content into a defined width and a height. This way, before the loading finishes, there will be space reserved for the loading content and it won't mess up your page layout.

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.

One div and its content on website loading last

UPDATE : With help from #TrueBlueAussie,
Yes, since I am not hiding the div, the code below is useless. So ignoring it (The script I used below) , is there a proper solution to my problem.
I have a website, http://frankvinyl.com/
It is a wordpress website. The featured image at the top, it loads after all the website is loaded.
I tried for different solutions for loading the DIV first, but its not working.
$(document).ready(function() {
$("#main1").show();
});
The problem is, the content of #main1 loads after all the website and content is loaded. I just want to load the div with the flow as the rest of the content.
Have been tweaking around but cannot find a appropriate solution.
You are waiting for the document to be ready in your jquery.
Try putting $("#main1").show(); before the document ready.
Don't know if it will work, it has been a long time :p

Preload array of images for faster load

I read here in SO about preloading the array of images for faster loading of the web page so that when the application needs them to be shown, that would have loaded and can be shown instantly. But my doubt was where to include the code snippet:
at the bottom of page or
at the start (<head>)?
As, I also read that in order for fast loading one should include all the javascripts at the bottom.
Which will be a better way? Or do I have to compromise on both the ways?
The javascript code:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
preload([
'images/bg.jpg',
'images/logo1.png',
]);
</script>
Even though all the other answers are inherently correct. They don't seem to address you directly.
Your script is not making use of any DOM elements. Which means that waiting for the DOM to load is not a concern at all.
The halt of the layout rendering while downloading a <script/> is always a concern (unless you use new HTML5 capabilities such as async), that's why they prefer to place it before </body>.
By placing it before </body>, your rendering will not be halted. Performance-wise, iterating such a tiny array may only be a micro-optimization.
By the way, you don't need to wrap the array in $() to use .each(), you should use $.each.
function preload(arrayOfImages) {
$.each(arrayOfImages, function(index, image){
$('<img/>')[0].src = image;
});
}
Generally, put your function calls and everything that you want to do after the page finishes loading inside
$(document).ready(function() {
// Handler for .ready() called.
});
(See Docs).
This also applies to your call to preload(...).
As you use $('<img/>')[0].src = this, the browser will cache the image according to this comment: Preloading images with jQuery
Edit: The position of the <script/> tag in your DOM tree plays only a minor role, as Konstantin pointed out.
The top and the bottom of the HTML page is relevant because that is how the browser reads your page. Stuff on the top gets done before the stuff on the bottom.
In regards to image pre-loading you should do it in the top of the page in the <head>. Why? Because you don't need to use it yet. The rest of the page isn't ready and chances are that the place where you want to put the image doesn't even exist just yet.
We usually put JavaScript on the bottom of the page because we want to do something when the DOM is ready. You can put it on the top as well! But you would have to NECESSARILY use the $(document).ready(function(){}); in order to be certain that it would work as intended.
So, initiate your pre-loads on the top (or by using window.onload) while the rest of the page is loading as well. You wont really get much benefit out of doing it on the top unless you do it using CSS or if you bind the load event of a particular div that occurs on the top of the page and pre-load your images there.
Why not making a DIV on the very begining of the BODY section and move that DIV outside of the visible area?

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