Do <iframes> and images loaded via AJAX delay window.onload? - javascript

I'm trying to make the window.onload event fire sooner so that Google will think my page loads faster (this is a frustrating task since how long it takes to get to window.onload is basically irrelevant from the user perspective, but I digress)
However, I don't know what delays the onload event! Specifically:
If I load a Facebook likebox on my page in an <iframe>, does its loading delay the onload event? What about if the likebox iframe has to load a bunch of profile pics; does onload wait until they fully load?
Suppose that on document ready I do an async AJAX request for an HTML blob and inject it into the page. If this HTML blob contains a bunch of <img> tags, does the onload event wait for all of these to load?
In general, how does the browser know when to fire the onload event? What sorts of things block onload, and what sorts of things don't?

a) You can't control window.onload except by reducing the page "weight". Its up to the browser to decide when its going to declare that event.
b) Google doesn't have a clue about the window.onload event because its not parsing JavaScript.
1) You can completely eliminate the Facebook payload by using XFBML version of the like button and asynchronous loading of the Facebook JavaScript SDK (http://developers.facebook.com/docs/reference/javascript/FB.init/). Do note that it will work only if JavaScript is enabled.
2) Everything that is going to dramatically increase the weight of your web page should be loaded asynchrouniusly, preferably after the window.onload event has fired.

If you look at the waterfall, in firebug or chrome inspector, iframe and ajax calls does affect the onload event. I ran into similar problem with facebook considerably slowing down site. Yes, while looking at pageload time in webmaster tool, it shows the lag.
My solution was to dynamically append facebook iframe when the page is completely loaded. and for ajax calls, i only trigger them on load.
This brought my page load time from 7 seconds with embedded facebook iframe, to 2.6 seconds with dynamically appending it.

Related

Something blocking load event?

Something weird appears on a website I developed. Page content is loaded in 5 or 6s, but the DOMContentLoaded and Load Event actually fires after 1m 10s.
When I reload page during loading it loads fast. Any hints welcome !
EDIT: I disabled soundcloud API call, and I'm still in troubles.
Server error logs are empty.
Here is a link to the website.
The DOMContentLoaded event is fired when the initial HTML document has
been completely loaded and parsed, without waiting for stylesheets,
images, and subframes to finish loading.
After the DOM Content is loaded, images, scripts, fonts, etc still need to finish loading.
For more information on the difference between DOMContentLoaded and Load events check out:
Difference between DOMContentLoaded and Load events
There lots of ways of improving this events timings.
Checkout out page speed best practices:
https://developers.google.com/speed/docs/insights/rules
You can even use the chrome extension tool to help you out.
https://developers.google.com/speed/

Gmail Chrome Extension and document.readyState

I am creating a chrome extension for gmail, and I have seen some odd instabilities around when certain page objects load. Since I am trying to modify the GMAIL DOM (Customize it for my extension) it needs to be fully loaded before my initializer runs. My extension always initializes well before the DOM is fully loaded, so I need a way to have it poll until the DOM is fully formed to do its thing.
I have tried using document.readyState to poll the document so I know when to start modifying the fully-loaded DOM, but it doesn't always work.
I put into the console a printout of document.readyState polled every 100 milliseconds once the page begins to load, and I noticed that about 1/10 page loads document.readyState becomes "complete" BEFORE the DOM is fully loaded. I can tell this because I do a jQuery selector for the GMAIL compose button and it comes up empty when this occurs, and find it as expected every other time (It finds the compose button).
Why would this be? Is there a better way to have my extension initialize script check to make sure the DOM is fully loaded before firing the DOM mods?
EDIT--
I have the script that checks document.readyState as a script injected into the UI as a content script.
Gmail website is dynamic. readyState / DOMContentLoaded and friends are all rather useless, since most of the UI is built on the fly and is not in the "initial" DOM. This is exactly what you're observing.
You need to either poll for the compose button as RobW mentioned, or watch for it being added with MutationObserver events. Also of note is the mutation-summary library.
Your code for document.readyState should be located on your content scripts.
The document referred by the background and popup pages is not the web page's.
More info here: https://developer.chrome.com/extensions/overview#arch

Event handler for web fonts load?

I've got a piece of code that wants to perform a jump to a particular id on the page as soon as the page is ready. I accomplish this by performing a jquery.animate() so that the scrollTop is at my target element.
However, I'm using web fonts, and for some reason the ready event is firing before the web fonts have loaded and been applied. The result is that the animation ends on a position that is often completely unrelated to the actual position of the element I want to scroll to.
I've verified this by opening the timeline in the Chrome inspector, where I see the animation triggering, followed by the web font loading, followed by a re-render which causes my animation target scroll point to become meaningless. I've also confirmed that this issue does not manifest itself when I use a system font.
Could anyone offer some advice? Perhaps there's some sort of event that fires after a web font has been applied?
$(document).ready(...) is triggered when the browser has finished downloading the entire HTML of the page. It is often before the browser has finished downloading the stylesheets, let alone the font files.
Assuming it's loaded from a stylesheet included in the HTML (as opposed to a JavaScript added stylesheet), you should be listening for the window event, rather than the document's load event.
$(window).on('load', function(){
// your resources are loaded
});
Try using .load instead, as .ready is only after the DOM is loaded.
$(window).load(function () {
// run code
});
Here is info regarding why .ready() is NOT what you want:
http://api.jquery.com/ready/
Here is info why .load() (really the Javascript load event) is what you want (it waits for resources to be loaded):
http://api.jquery.com/load-event/

I want to show preloader for non ajax call and hide preloader after resources loaded?

I am requesting a html5 web page it contains images and sound files. Once all the images and sound files loaded i want to hide a preloader using style property. How do I know last resource loaded for a web page request so that I can hide the preloader?
Note: Here is my situation, I dont use any ajax call it's a normal webpage request.
How do I know last resource loaded for a web page request so that I can hide the preloader?
The load event fires when all files have finished loading from all resources, including ads and images. This link ( http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/Default.html ) from IE9 testdrive demonstrate diffenence between load event and DOMContentLoaded event (not supported in IE8-).
As result:
When page starts to loading you must to register event handler for load event and display preloader message.
When load event occur then browser execute your load-event-handler in which you can hide preloader message.
Well, you dont really have access to the "loading status" of your image and sound files. But the Browser fires the onLoad-event, if a component is loaded. This works even for images (and mayby soundfiles). see http://www.htmlcodetutorial.com/images/_IMG_onLoad.html . you can use $(document).ready(...) too (for your html-page) if you are using jQuery.

How do you protect web pages against slow ad tracking web beacons?

I work for a large website. Our marketing department asks us to add ever more web ad tracking pixels to our pages. I have no problem with tracking the effectiveness of ad campaigns, but the servers serving those pixels can be unreliable. I'm sure most of you have seen web pages that refuse to finish loading because a pixel from yieldmanager.com won't finish downloading.
If the pixel never finishes downloading, onLoad never fires, and, in our case, the page won't function without that.
We have the additional problem of Gomez. As you may know they have bots all over the world that measure site speed, and it's important for us to look good in their measurements, despite flaws in their methodology. Their bots execute onLoad handlers. So even if I use a script that runs onLoad to add the pixels to the page after everything else finishes, we can still get crappy Gomez scores if the pixel takes 80 seconds to load.
My solution was to add the pixels to the page via an onMouseMove handler, so only humans will trigger them. Do you guys have any better ideas ?
jQuery and other JavaScript frameworks can help handle the problem by using a method such as the" document ready" function, which fire when the document is ready and don't need to wait for all the images.
I'll quote direct from the jQuery tutorial:
The first thing that most Javascript programmers end up doing is adding some code to their program, similar to this:
window.onload = function(){ alert("welcome"); }
Inside of which is the code that you want to run right when the page is loaded. Problematically, however, the Javascript code isn't run until all images are finished downloading (this includes banner ads). The reason for using window.onload in the first place is due to the fact that the HTML 'document' isn't finished loading yet, when you first try to run your code.
To circumvent both problems, jQuery has a simple statement that checks the document and waits until it's ready to be manipulated, known as the ready event:
$(document).ready(function(){
// Your code here
});
You could use this event to load those problematic images.
See this link for further info.
http://docs.jquery.com/Tutorials:How_jQuery_Works
I also work for a large website and here is what we did:
Moved the ad calls to the bottom of
the page, so the content would show
up first (because JS is
synchronous).
Loaded the ads using Ajax Calls (to
allow the page to be usable while
the ads are loading) into a hidden
element.
The position is moved to the correct
place in the DOM and "unhidden."
Depending upon the page, we either
wait for the ad to finish loading
before move the position, or we move
the position immediately.

Categories