I'm trying to create function which will invoke after every part of the document is loaded and applied.
So: are all css applied in document.load? Does document.load invoke if some resources will have 404 error?
The load event will fire after the entire, initial document (including dependancies), as described by the HTML (and CSS) source, has loaded.
Content added to the DOM with JavaScript may not finish loading until after the load event had fired.
Related
I use jQuery (which seems to use a glorified form of innerHTML document writing), to add a piece of HTML to the DOM:
$newElem=$(HTML).appendTo($container);
The said HTML piece contains CSS links, which seem to load async. Images also load async.
I need some form of load event similar to window.load when async content is done fetching AND done parsing (i.e. CSS), because based on that I trigger a container resize/rearrange function, and sizing obviously depends on CSS, async images (and even async fonts but this last point is not an immediate concern for me). So how to get a proper load event for the DOM-added HTML?
I don't think there's a built-in "load" event that's fired when all the resources requested by the dynamically added elements are finished loading.
You can probably implement this though if you're sufficiently motivated.
There's waitForImages jQuery plugin, that goes through the given DOM subtree, looking for images (<img> tags as well as references to images in computed CSS styles). It creates an <img> element for each image referenced from CSS to track its load status (as discussed here).
It doesn't support:
content:url() images (should be easy to add)
Tracking resources referenced from dynamically loaded CSS. You can use a similar approach to find all the <link> elements in the given subtree, and use their load event (supported in all major browsers now) to wait until the CSS is loaded. After CSS finishes loading, run waitForImages to track the image loads.
I have a website with a background and a main container. I wanted to hide the container until the whole page has been loaded. so i added
#cover{opacity:0}
at the start of the page and
$(window).load(function() {
$('#cover').css('opacity','1');
});
at the end, just before </body> tag. It works perfectly when page is loaded for the first time.
PROBLEM : If I load the same page once more, it shows all the images and text scattered throughout the page. It works fine once completely loaded. certainly this type of behavior is caused by cached images. but all the images are inside the main container which has opacity:0, This has completely confused me.
UPDATE 1:
I am using turn.js to convert the whole container into a book, i want the book become visible when the book is ready i.e. both loading of images and javascript initialization has completed.
UPDATE 2:
This is how i am checking for "images loaded" and "javascript initialized". it worked as i wanted it to. is this a good way to handle the situation?
$(window).load(function(){
$(window).ready(function() {
$('#cover').css('opacity','1');
});
});
$(window).ready(function(){
$(window).load(function() {
$('#cover').css('opacity','1');
});
});
The problem may be related to your $('window').onload();
Take some time and read this SO post.
what-is-the-difference-between-window-load-and-document-ready
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 and sub-frames have finished loading.
From the jQuery API
documentation, .ready( handler ):
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.
Let me know if this change works.
You do not call the same block in your CSS (#container) and in your JS (#cover).
I have a project that needs to get the logo's dimension and adjust its position accordingly. From what I understand, all the elements on the page should be ready for use right after $(document).ready or onload event. I also tried to put the script before the closing body tag to make sure I can get everything. I use jQuery $(element).width and $(element).height to measure the logo image.
However, I am not getting these value every time: I console log these two values. Sometimes, it shows me zero which I guess the image tag is loaded, but the actual image is still loading. I am so confused because I search online, they all say all the elements should be ready if I use DOM ready or put the script tag in the end.
try this
$('#img').load(function() {
// Handler for .load() called.
});
all the elements on the page should be ready for use right after $(document).ready or onload event. I also tried to put the script before the closing body tag to make sure I can get everything.
No, the $(document).ready event resp. embedding the script as last element in body only guarantee that the DOM structure is build up already. That does not mean that external resources referenced by any elements have already finished loading – the only event that guarantees that is the load event.
The jQuery docs explicitly warn about combining $(document).ready and “old school” load event handling (meaning onload attribute on body or window.onload) – so you should use .on('load', handler) instead. But be aware of the cave-ats of that regarding images that the docs also mention.
so often i put jquery document ready functions at the bottom of my html, just to have it run before all the elements of the page are loaded. i'm tired of my functions not working because resources arent finished loading on the page, jquery.ready keeps saying the elements are done loading when they arent! who wants to set a 300ms timeout just so that their functions wait a little after jquery.ready?
Use .ready() to perform actions when the DOM is ready for scripting.
$(document).ready(function(){
});
Use .load() to perform actions when the "page" (resources including files and images) is loaded.
$(window).load(function(){
});
jQuery.ready fires when DOM elements are ready, not when scripts/images/etc finish loading.
Description from the docs on .ready():
Specify a function to execute when the DOM is fully loaded.
As simshaun said, jQuery.ready fires when the DOM is ready - not when things like images are ready. If you want to wait for images to be loaded, you have to use the following code:
$(window).load(
function() {
// do stuff here
}
);
$.ready runs when DOM is loaded not when the page is fully loaded (images etc...)
Perhaps you're looking for
$(window).load(function() {
// stuff
});
From the jQuery API documentation:
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.
So, use the load event if you need everything to be finished loading but if you only need the DOM to be ready, use the ready event.
.ready() function runs when the DOM is ready not the binary data is loaded. to ensure that the binary data is loaded you can use .load() function
We have a JQuery $(function() statement as:
<script type="text/javascript">
$(function(){
//Code..
})
</script>
Dumb question - when exactly is this function executed? Is it when the entire HTML page has been downloaded by the client?
What is benefit of using the wrapping your code within $(function() as opposed to just doing:
<script type="text/javascript">
//Code..
</script>
It fires when the document has been parsed and is ready, and is the equivalent of $(document).ready(function () { }).
The obvious benefit is that having your script tag before other elements on the page means that your script can interact with them even though they're not available at parse time. If you run your script before elements have been parsed and the document is not ready, they will not be available for interaction.
It is executed as soon as the DOM is parsed and is invoked in order of appearance if there are multiple appearances. At this point the document is however not displayed, its just parsed.
When the document completes loading. It is the same as writing this:
$(document).ready(function(){});
EDIT: To answer your second question:
If you don't wrap your code in the block above then it would fire as soon as it is encountered instead of after all the controls on the page have loaded. So if a block was at the top of a page and it referred to elements in the page those references would not work as the elements have not loaded yet.
But if you wrap in the block then you know that the page has loaded and all elements are available to now reference.
It fires after the the document has fully loaded, the DOM tree has been initialized, all CSS styles have been applied and all Javascript has been executed. It differs from the load event in that elements (other than CSS/JS) that load their content from other URLs, such as images or flash files, have not necessarily finished loading at this point. This is usually called the "domready" or "domloaded" event, and some modern browsers support it directly (e.g. Firefox has a DomContentLoaded event), and on others it can be simulated with various tricks, like using the defer attribute or placing a script at the very end of the body.
The advantage is that you can reliably interact with the document at this time; for example you can set an event handler on an element with a certain ID and be sure that it already exists in the DOM tree. On the other hand, it can run considerably earlier than the load event, if some external resource is slow to load. If your script is at the end of your HTML code, then there might be little difference in using or not using the domready event, but usually scripts are called from the head tag, and at that point no elements of the body are available yet.