Is it possible to detect when HTML has finished loading AND rendering on the page? If so, how?
The page consists of HTML, calls to ajax, receives data back from ajax calls, lots of javascript stuff and some images too. I would like to detect when everything has finished. What I can't do is stick a function call at the end, because I don't know when the end is.
For example, the page has lots of ajax style elements which users can pick and choose from, i.e. user 1 might have a different number of elements than user 2 and even in a different order.
So what I can't do is use the last function to simulate the end of HTML rendering, because I won't know which function will be the last function.
The problem with answering your question is in the last few sentences where you say that you don't know where the end is because of user choices. There are two automatic events you can bind JavaScript to. What jQuery calls $(document).ready() which means the DOM is ready for manipulation (before images load and after external scripts and CSS are loaded) and what is more commonly called body onload (in jQuery this can be written as $(window).load()) which runs after all static assets are fetched. Your Ajax calls will all fire after at least the DOM is ready and there is no defined event for what happens after all of them. For that you need to keep track of them on your own. You could use a "last horse out of the barn" approach. Add a small bit of logic to the end of your Ajax calls to see if it is the last and raise a custom event called "reallyAllDone"
Yes onload
<body onload="load()">
That would detect when the contents of the body have loaded.
$(document).ready
will help you to know when the dom has finished its event and its ready
Related
I am injecting a Javascript-File via a Chrome-Extension on a webpage that uses SAPUI5.
I want to get the model in the binding context of some UI5-Input elements and in order to do so, I need to get to the inputs via document.getElementsByTagName. (or is there another way?)
This only works if they are already rendered. Unfortunately the ready or load events fire too early, when not everything is rendered yet.
Is there a way for me to know when the inputs have rendered?
Edit: I do not have access to the source code of the page, everything I do has to be in the injected script.
To make sure everything is renedered before firing your events, sapui5 has the function onAfterRendering.
All logic written in that function will only be executed after the control is rendered.
When a rerender of the control is rendered, the onAfterRendering is triggered again.
In the end I did it like this:
I already had event listeners attached to click and key events. Every time the handler is called, I check if document.getElementsByTagName('input') returns the inputs I need.
If yes e. g. the rendering of the inputs is complete, I set a boolean that the page is loaded completely and execute my code.
Assume that we know that an element (or a very specific selector) is going to appear on a page. Is it possible to set up beforehand, via JS or jQuery, an event that goes off when the browser gets to that element and parses it? This is NOT content loaded through AJAX but is present in the primary page's source.
The reason for this need is that I'm working with a hosted system that greatly limits where and when I can inject code to fix problems with the page. I can pretty much only place my code at the start and end of what is a really long page. Right now, the page has to load completely before it can inject any desired changes (yuck!). Plus, I cannot make the pages shorter in content.
This is basically the process I would like to happen:
Page begins loading
Listener set up to watch for .specialClass elements
...
.specialClass element gets parsed/added to DOM
Listener triggers function on that element
...
.specialClass element gets parsed/added to DOM
Repeat as before
...
Page finishes rendering
So, is this possible at all? Thanks in advance.
I found myself in a following situation. I need to somehow not include <div class="article-meta-social"></div> element and all its contents into my document.ready function. The reason is, it has links to apis from facebook, twitter, g+ etc... and Multiplied by several posts it results in a little delay before contents within document.ready function are fired off.
Therefore, what can I change in order for this
$(document).ready(function(){
});
To not wait until .article-meta-social and its contents are ready?
$(document).ready relies on the native DOMContentLoaded event, which does exactly what it says - fires when the entire DOM has been parsed. So to achieve what you want, insert the contents of .article-meta-social dynamically inside your ready handler. This way it won't hold up the main rendering of your page.
I have an unusual problem that is beyond my client side skill set. I have an html page with two consecutive script tags in the body. Both script tags fire an ajax request to retrieve content and then put it in the DOM. I control the first script tag, and I don't have any control or knowledge about the second script tag. I just know it makes an ajax call and put stuff in the DOM. I also know that my tag is first.
I want my script tag to fire immediately and pause/stop the second tag. Then, contingent on what my ajax returns, I may choose to execute the second script tag. How do I do this?
I wrote a fiddle demonstrating my problem. I substituted settimeout's for ajax calls and Math.random for my decision. Note that the settimeout duration for the first one (my one) is very long, 3 seconds, and the duration for the second one (the one I don't control is very short, .5 seconds. What's happening now is that they are both running immediately. The second message comes in at .5 seconds, and the message from the first comes in at 3 seconds 50% of the time.
I want the first script to run, wait 3 seconds, make a decision and either print the first message immediately, or call the second script which would wait an additional .5 seconds to print the second message. I should never see both messages at the same time, and I should never see the second message before 3.5 seconds.
Again, I don't know any knowledge over the contents of script two. You could easily hide id=ext_div in this case, but I don't know what that id is. That is not the answer I want. I was thinking about grabbing the event on the first script and doing something to that, stopPropagation or something like that at the TODO1 comment. But that doesn't work. Event if it did, I would need a resumePropgation function which I don't event think exists.
I want my script tag to fire immediately and pause/stop the second tag. Then, contingent on what my ajax returns, I may choose to execute the second script tag. How do I do this?
The only way to make that happen is to make your ajax call synchronous, e.g., pass false as the third argument to XMLHttpRequest#open (or whatever the equivalent is in the library you're using, if you're using one). There are several reasons why this is a bad idea, but if you absolutely, positively need your ajax call to complete before the next script tag is executed, that's the only way to do it. Of course, it means that any DOM elements defined below your script tag in the HTML document won't exist yet.
It feels like you want some sort of dependency management system for your front-end scripts.
Try out RequireJS. You could load in your script, run your ajax request, and depending on your logic, decide whether or not to load the second external script.
This is assuming you can control the markup on the page of course.
There seem to be a number of weird things one could do if one wanted, for hooking up page-load type events. Here are some specific questions:
I know about the auto-hooked-up pageLoad function. Are there any others like it?
Where do I hook up events like those from, e.g., Sys.Application.add_init or Sys.WebForms.PageRequestManager.getInstance().addPageLoading?
What's the difference between the first two of those and pageLoad, if any?
Rather importantly, what is the "correct" way to be sure that the ASP.NET AJAX files are all loaded before you start hooking up event handlers, processing the page, etc.? My current approach is to use the auto-hooked-up pageLoad to hook up the rest, but this seems kind of hacky.
The built-in pageLoad function is just a shortcut to the Sys.Application.load event. There is another one - pageUnload. Find more info here.
You can hook those events up almost whenever you like - using the pageLoad function, invoking the add_init/add_load method inside a script block or calling ScriptManager.RegisterStartupScript from server-side. Just make sure you call that JavaScript within the form tag (see #4). By default all those events occur after the page is loaded so your code should have already been executed by then.
Technically there should be no difference between using pageLoad and the load event - the first is just easier to hook up.
By default the ASP.NET Ajax script files are rendered just after the beginning of the form tag. This means that those files will get loaded before any other JavaScript statement defined within the form tag gets executed.