Geek Answers Handbook

How to allow javascript to run only when dom and css are ready but not image

I want to execute some javascript when dom and css are ready, but I don't care about the image (I tend to lazyload the image)

I know how to determine readiness status at home, but how to determine if css is ready?

+7
source share
7 answers

You should use the document.ready event. window.onLoad fires when all images and other files are fully loaded.

Source: window.onload vs $ (document) .ready ()

+1
source

There is no way in javascript to indicate if your .css files are uploaded unless you upload your css files explicitly using javascript. This is how I will do the last:

 function dynamicallyLoadCss(fileName,callBackFunc){ var fileRef=document.createElement("link"); fileRef.setAttribute("rel", "stylesheet"); fileRef.setAttribute("type", "text/css"); fileRef.setAttribute("href", filename); if(callBackFunc) { callBackFunc(); } } //Call the function like so... dynamicallyLoadCss("mystyles.css", function() { console.log("Our hamsters have finished loading your mystyles.css file."); });
0
source

You need something like below. This function is executed as soon as the DOM loads, but not the whole page. There is a big difference between loading a page and loading a DOM.

 $(document).ready( function(){ alert('DOM is now loaded and can be manipulated .'); } );
0
source

It will be a combination of using JS onload and loading all your CSS first and top. If you download all your CSS before loading any script, you are guaranteed to download all your CSS files; merge with JS at boot and you get what you are looking for.

0
source

Load all CSS into the page title and before any JavaScript.

It is also best to put JavaScript at the bottom of the page immediately before the tag to ensure that all elements are fully loaded.

 $(document).ready(function(){ // now do your actions });
0
source

Many examples of using the jQuery DOM ready function are listed here - but they could not mention or demonstrate that you need to enable jQuery to use it.

You can use JavaScript directly to accomplish what you want - but the technique varies in different browsers, and jQuery always does a great job of normalizing these differences in all directions - I personally am a jQuery person, There will probably always be :)

At the end of your <head> HTML document, include the jQuery library and then your code :)

 <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(function(){ console.log("DOM is Ready! Images haven't finished loading yet!"); }); </script>

Using the jQuery .ready() function occurs in several forms. Personally, I like the above method. The two below are apparently the most officially justified.

 $(document).ready(function(){ console.log("DOM Ready!"); }); $(function(){ console.log("DOM Ready!"); });

The jQuery documentation on .ready() has this to say:

While JavaScript provides a load event to execute code when rendering the page, this event does not fire until all assets, such as images, are fully received. In most cases, a script can be run as soon as the DOM hierarchy is completely built. The handler passed to .ready () should be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it is important to reference external style sheets or embed style elements before referencing scripts.

I highlighted a quote from the docs for you since you mentioned that you want to load CSS first. In appearance, you just need to make sure that the <link rel="stylesheet" href="style.css" /> are located in the <head> section above your jQuery code :)

Happy coding! // Chase

jQuery.com

0
source

If you cannot use the $ (document) .ready technique, you can put your script code right in front of the body tag.

 <body> html code.... .... <script> var executeAfterDOMReady; .... </script> </body>

As for CSS, you can invoke your CSS file through jQuery:

 $("<link/>", { rel: "stylesheet", type: "text/css", href: "your.css"}).appendTo("head");

Or even make an Ajax call:

 $.ajax({ url:"your.css", dataType:"script", success:function(data){ $("head").append("<style>" + data + "</style>"); } });
0
source

More articles:


All Articles