I'm using Skrollr to animate & create parralax effects when scrolling the page, but there's a short lag which I guess is the Skrollr javascript/jQuery initialising.
Any ideas on how to avoid having the mess at the beginning?
The WP website in question is this one : http://hustynminepark.com
Thank You!
Unless I'm mistaken, the layout of your page entirely depends on the activation of the plugin. You can solve this problem by finetuning the CSS so that the initial page corresponds exactly to what you see after activation of the plugin.
Also, don't forget to minify (concatenate / uglify) your javascript files before loading them into the browser; this will speed up the loading of the page and the activation of the plugin.
Btw, the site looks pretty cool.
If I am correct you have a FOUC, you can use jQuery to detect when your DOM in ready then call init.
First of all you want to include the skrollr.min.js file at the bottom of your document (right before the closing ) and then call skrollr.init(). Or you can place it inside the if you want to, but make sure to call init() once the document has been loaded (e.g. jQuery's ready event or even window.onload).
Related
I am trying to hide my preloader with JavaScript once the DOM and at least the top content has been loaded. The problem is that my page has several iframes which can slow the process down a lot.
My understanding is that if I use jQuery's $(document).ready to hide the preloader, it will be hidden too soon. On the other hand, if I use $(window).load, the waiting time may be too long. So, is there a middle-way solution, - kind of like window.load but without waiting for iframes?
EDIT:
My page has stuff like Facebook Like button Google Translate and a few other scripts that work via iframes. These are not critical elements, and I would not like to wait for them to load fully.
On the other hand, CSS files like Bootstrap, jQuery, etc. are curcially important for the presentation, and therefore to show the page (hide preloader) w/o having these loaded first would be premature.
Thanks.
You could use $(document).ready to determine if a particular element is loaded before hiding your loader.
Or if you have partial views, to have a $(document).ready function in one of those pages js do the loader hide job.
Since you did not provide more info, these are closer to guesses than real solutions.
I think you're looking for document.onload, which will fire when the DOM tree is ready. I believe that it fires before iframes, which all get their own onload callback/event handler.
You can also try placing the script tag at the end of your html file without begin inside an onload or ready function. This will cause it to load the html content, then fire the Javascript.
EDIT
A thought just occurred to me, which may or may not be useful. You probably have an idea about when you want your script to execute. In whatever browser you are using, check the network tab of the development console. There may be some other element's onload function you want to wrap your code in. For example, if you have a background image you want to make sure loads before your code executes, you may want to use it's onload.
As Petre said, lack of info in the question makes answering difficult.
My webpage webpage link uses 3 javascripts. A TabSlideOut script, a SmoothDivScroll script and the TN3 Image Gallery script.
When the page is loaded for the first time or reloaded the script for the TN3 Image Gallery is running for a while because many images have to be loaded and this takes time.
During this time the script for the SmoothDivScroll waits and only executes when the script for the TN3 Image Gallery is finished. Because of that the page looks very ugly during this time because the images of the SmoothDivScroll script are shown one after each other instead scrolling smoothly as they do when the SmoothDivScroll script is executed. You can see this when you reload the page.
What I would like to achieve is that the script for the SmoothDivScroll is executed first and only then the script for the TN3 Image Gallery should be executed. Or anything else that could stop the webpage from looking ugly when it is reloaded.
I am not a very experianced web implementer and I don't have javascript programming knowledge. I tried for two days to find a solution but I struggled. I hope that somebody can help to solve my problem. Thanks
I'm going to call this a FOUC problem; e.g., a "Flash of Unstyled Content." Very common. Been around since the late 1900's, and Safari is notorious for this.
Short Answer: Initially set visibility:hidden on your elements with an inline style. Then use JavaScript to set visibility:visible after they've loaded.
Generally, the solution is to hide content until the content is loaded, and then display it when it's ready. Often while content is loading, you will display a spinner of some kind.
Technically, there are many ways to do this. You can toggle the CSS display, visible, and/or the opacity setting. You can show an overlay div with a high z-index--which I call a "veil" with id="veil"--and then remove it when content is loaded, and use a spinner as the veil. You can also move things completely off the screen until they've loaded, and then move them into place. You can combine these methods.
Personally I've had the best success cross-browser and cross-device with the CSS visibility property. I like how it reserves space for the object in the layout. The other solutions sometimes flake on mobile and some older browsers. Here's a couple of snippets to get you started.
First, set visibility to none with an inline style.
- DISCLAIMER: I am NOT a fan of inline styles, and understand the concept of separation of concerns. In this case, I deem it necessary because this must have the highest cascade priority, be applied as quickly as possible, and I've had good success with it cross-environment. Purists will argue that this should go in a CSS file, but I believe that we should not follow any guideline dogmatically; sometimes we must have the courage to break convention in the presence of strong justification. Let the reader decide.
<div id="pan-content" class="clearfix" style="visibility:hidden">
Then, on page load (using jQuery):
$('#window').load( function() {
$('#pan-content').css({visibility:'visible'});
});
This might prove to be a little slow, because you're waiting until the whole window loads until you display the banner. You can also attach the event to specific resources, which will speed things up. See the following post:
Detect image load
Hope this helps!
You should never rely simply on order of scripts to determine your execution. Put your calls TN3 in a function that is called in the SmoothDivScroll complete method.
It might be easiest to use the non-minified version to do this.
i want to know if it will effect the site to not unload javascript and css files, when other files are keep loading on the site. well im creating functionality like facebook with ajax, so i was wondering if i have to unload the javascript/css resource on new page call.
Little more explanation: ok when you go to facebook.com, it start loading the page in background with ajax. and if you click on any page/profile/section it will load the required css/javascript for it, but im not sure if they unload the required javascript, which no longer need on new request. so i was wondering, should i leave the javascript which was loaded previously or should i remove it, cause removing is not hard part, just keeping track might be little complex for a big site.
any pros/cons?
The only way you could "unload" javascript would be to unset the script objects created by the loaded script.
So if you script is:
var awesome = {
init : function()
{
/** init stuff **/
},
do_stuff : function()
{
/** do awesome stuff **/
}
}
You could technically "unload" it by doing something like:
awesome = null;
But you'd have to be pretty tidy with your loaded script.. and there's still the potential issue with event handlers still being attached to some elements of the dom.
You should put logic in place that determines whether you need to load the script in the first place. If it's not necessary for the particular page/view, then don't load it.
The only way to "unload" that I can think of is to reload the page without it, which seems like a terrible idea IMHO.
Let me get this straight. According to best practice we should initialize jQuery at the bottom of the page. If we do that, any reference to the jQuery object (ie. $ or jQuery) above the reference will be a null. However, as for $(document).ready(), the reason why this jQuery function is ever needed is when you want to delay an execution of a function after the page has loaded. This seems to be a conflict.
How do I use the functionality of $(document).ready() at the top of the page and still reference jQuery at the bottom of the page? I think jQuery should be initialized at the top of the page for this very reason.
If you're going to put your scripts at the bottom of the page for efficiency purposes, and there are no further elements (beyond </body> and </html>) you wont even need to use $(document).ready(...);.
Placing your code at the top of the page makes sense semantically, and the loading time "savings" is negligible in most cases. It really only makes a difference when the scripts are enormous, or when the scripts are on another server that may or may not be active.
If you're live-linking jQuery, i'd suggest putting it at the bottom of the page. If you're local-linking jQuery, the top should be fine. Just make sure to use minimized code.
Just put $(document).ready below where you initialize jQuery regardless of where that is.
In reality though you should be putting all your JS at the bottom, even $(document).ready.
I was just using the plugin "Yslow" for Mozilla Firefox, and it told me that I should put JavaScript at the bottom. I have heard this before but haven't really thought about it too much. Is there really an advantage in putting JavaScript at the bottom of a web page compared to the top?
It'll allow the web page to load visibly before executing JavaScript, which makes sense for things like Google Analytics, which don't need to happen before the page loads.
You may also want to look into things like jQuery, prototype, etc and attach to the "ready" handler, which executes JavaScript code after the DOM has been fully loaded, which is an appropriate place for much JavaScript code.
Assuming you aren't running on a CDN or aren't serving your JS from a separate sub-domain or server, it will load synchronously and force your HTML content to wait until it has downloaded the files. By placing the JS at the bottom of your page before the closing </body> tag, you are allowing the HTML to be parsed prior to loading the javascript. This gives the effect of faster page load times.
If you have static html content and a lot of javascript, it can make a difference in perceived page load time since the html will load first giving the user something to look at. If you don't have much javascript, or the existing page content relies on the javascript to be useful, then this is not as useful practically-speaking.
I want to bring update to this topic, google has recently introduced async snipped http://support.google.com/analytics/bin/answer.py?hl=en&answer=1008080&rd=1 which can be added for your site to bring e.g. google statistics support. It should be placed bottom of the <head> section for best performance. The point is that this increases likely hood of tracking beacon to be sent before user leaves the page.
Also it should be located there if you want to verify your site in google webmaster tools using your google analytics.
Other than that, same rules still applies basically - javascript at bottom for "fast" loading of the page. I used quotes because I dont count page fully loaded until javascript finishes ;-)
Yes, the page will load the content and render it before loading and executing javascript, and the page will, as a result, load faster.
TOP
When you put your JavaScript at the top of the page, the browser will start loading your JS files before the markup, images and text. And since browsers load JavaScript synchronously, nothing else will load while the JavaScript is loading. So there will be a timeframe of a few seconds where the user will see a blank page, while the JavaScript is loading.
BOTTOM
On the other hand, if you place your JavaScript at the bottom of the page, the user will see the page loading first, and after that the JavaScript will load in the background. So if, for example, your CSS & HTML takes 5 seconds to load, and your JavaScript takes another 5 seconds, putting our JavaScript on the top of the page will give the user a “perceived” loading time of 10 seconds, and putting it on the bottom will give a “perceived” loading time of 5 seconds.
Taken from Demian Labs.
It allows all the DOM elements to fully load before loading the Javascript which addresses them. This standard is also part of Visual Studio.
Placing scripts at the bottom of the element improves the display speed, because script compilation slows down the display.
Yes including the javascript at the bottom of the page really quickens the loading of the page. Since browser executes things synchronously it impacts the page loading if it is placed at the top of the page. If it is placed at the bottom of the page, the page would have loaded the entire markup by then when the browser starts loading the javascript giving a better experience to the user.
It's advisable to put all inline scripts at the end to improve performance, you don't want your users to be staring at a blank white screen while the script renders. You can use defer attribute eg. to prevent link scripts from delaying your html rendering.