Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO. Put a div on top, like so: <div id=”cover”></div> set some styles: #cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;} and hide it with JS when all elements are loaded: $(window).on(‘load’, function() { $(“#cover”).hide(); … Read more
load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction. From the MDC, window.onload: The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images … Read more
The ready event cannot fire twice. What is more than likely happening is you have code that is moving or manipulating the element that the code is contained within which causes the browser to re-execute the script block. This can be avoided by including script tags in the <head> or before the closing </body> tag … Read more
I got an official answer from one of the jQuery developers: $().ready(fn) only works because $() used to be a shortcut to $(document) (jQuery <1.4) So $().ready(fn) was a readable code. But people used to do things like $().mouseover() and all sorts of other madness. and people had to do $([]) to get an empty … Read more
It seems like all the key points were already hit, but a few details fell through the cracks. Mainly: domReady It is both a plugin and a module. If you include it in the the requirements array w/ a trailing ! your module won’t execute until it’s “safe” to interact w/ the DOM: define([‘domReady!’], function … Read more
In simple words, $(document).ready is an event which fires up when document is ready. Suppose you have placed your jQuery code in head section and trying to access a dom element (an anchor, an img etc), you will not be able to access it because html is interpreted from top to bottom and your html … Read more
It depends on how your $(‘site-header’) is constructed. You can try to use $timeout with 0 delay. Something like: return function(scope, element, attrs) { $timeout(function(){ $(‘.main’).height( $(‘.site-header’).height() – $(‘.site-footer’).height() ); }); } Explanations how it works: one, two. Don’t forget to inject $timeout in your directive: .directive(‘sticky’, function($timeout)
Is $(document).ready necessary? no if you’ve placed all your scripts right before the </body> closing tag, you’ve done the exact same thing. Additionally, if the script doesn’t need to access the DOM, it won’t matter where it’s loaded beyond possible dependencies on other scripts. For many CMS’s, you don’t have much choice of where the … Read more
Indeed, you should use directives, and there is no event tied to the end of a ng-Repeat loop (as each element is constructed individually, and has it’s own event). But a) using directives might be all you need and b) there are a few ng-Repeat specific properties you can use to make your “on ngRepeat … Read more
The shorthand is: $(function() { // Code here });