I want execute some javascript just when the dom and css is ready, but I don't care about the image(I'm tend to lazyload the image)
I know how to detect the dom ready status, but how to detect the css is ready?
How to let the javascript executed just when dom and css is ready but not image
Asked Answered
Is modifying the dom using javascrpt to show your image after you have done your standard javascript processing an option? –
Roomette
@Kafuka:no, I think my image is just position there, wait for lazyload .Needn't using javascipt to modify –
Marius
You should be using the document.ready event. window.onLoad fires when all the images and others are fully loaded.
There is no way for javascript to tell whether your .css files are loaded unless you load your css files explicitly using javascript. Here is how I would do the latter:
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.");
});
How can I know the css file I insert dynamically have download complete? –
Marius
As soon as the dynamicallyLocadCss function runs, you your CSS should be loaded. I will edit the function to have a callback too. –
Voiture
You need something like below. This function executes as soon as DOM is loaded but not entire page. There is lot of difference between page load and DOM load.
$(document).ready(
function(){
alert('DOM is now loaded and can be manipulated .');
}
);
It would be a combination of using JS onload AND loading all your CSS first and on top. If you load all your CSS before you load any script, you are guaranteed to have all your CSS loaded; combine with JS on load, and you will get what you are looking for.
Upload all CSS in the Header of the page and before any JavaScript.
It is also best practice to put JavaScript at the bottom of the page just before the tag to ensure all the elements are fully loaded first.
$(document).ready(function(){
// now do your actions
});
Folks here are posting many examples of using jQuery's DOM ready feature -- but they have failed to mention or demonstrate that in order to use it you need to include jQuery.
You can use straight up JavaScript to accomplish what you'd like -- but the technique varies across browsers, and jQuery always does a great job at normalizing these differences across the board for you -- personally I'm a jQuery man. Probably always will be :)
Within the end of your HTML document's <head>, 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>
Use of jQuery's .ready() function comes in several forms. Personally, I like the above method. These two below, seem to be the most officially condoned.
$(document).ready(function(){ console.log("DOM Ready!"); });
$(function(){ console.log("DOM Ready!"); });
jQuery's Documentation on .ready() has this to say:
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to 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's important to reference external stylesheets or embed style elements before referencing the scripts.
I highlighted that quote from the docs for you, as you mentioned that you want the CSS to load first. By the looks of things, you just need to make sure that your <link rel="stylesheet" href="style.css" /> tags are placed in the <head> section above your jQuery code :)
Happy coding! //Chase
If you can't use the $(document).ready technique, you could put your scripting code right before the body tag closes.
<body>
html code....
....
<script>
var executeAfterDOMReady;
....
</script>
</body>
As for CSS, you could call your CSS file via 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>");
}
});
© 2022 - 2024 — McMap. All rights reserved.