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/
Related
I am aware there are similar questions but the answers are not working for me (example below). First, my (simplified) code.
HTML:
<div id="loading_screen">
<img src="<?= base_url()?>images/loading_screen.png" title="The game is loading, please wait.."/>
</div>
<div id="container">
<!-- a whole lot of HTML content here -->
</div>
CSS:
#container{
display:none;
}
JS:
$(document).ready(function(){
//when document loads, hide loading screen and show game
$('#loading_screen').hide();
$('#container').show();
})
The idea is simple: I initially show the loading screen and hide the container; once everything has loaded, I hide the loading screen and show the container.
But, it doesn't work. The JS code fires off show immediately, as soon as the container div starts loading.
The loading_screen div is only 1 small image (20KB) and the container div is a total of about 400KB.
There are images in the container div, as well as background images on some of its sub-elements. So according to the answers to this question I changed the code to $(window).load(function(). However, that didn't fix the issue.
I suppose I could do the following - not even create the container div at first, and only create it and all its content after the loading div has loaded. But, I'd rather not go down that path, there's server side code in the container, I'd have to add includes etc, and it's not worth it. I'm happy to rely on the fact that the 20KB image will load before the 400KB of content, I just need to get the code to not fire off until after those 400 KB have loaded.
EDIT:
I added this bit of code to the JS (outside the onload function) to see what's happening as the page loads:
setInterval(function(){
var st1 = $('#loading_screen').css("display");
var st2 = $('#container').css("display");
console.log(st1+" "+st2);
},100);
It keeps outputting none block, meaning that the loading_screen is hidden immediately and the container is made visible immediately.
You should take a look at the answer for this question: Detect if page has finished loading
The jquery page for the .load() api explains the following:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
It finishes with this example:
Example: Run a function when the page is fully loaded including graphics.
http://api.jquery.com/load-event/
$(windows).on("load", function() { /// this is deprecated --> $( window ).load(function() {
// Run a function when the page is fully loaded including graphics.
});
The "ready" event fires when the DOM is built, but before other stuff like images may be loaded. If you want a real "load" handler, then do that:
$(window).load(function(){
//when document loads, hide loading screen and show game
$('#loading_screen').hide();
$('#container').show();
})
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.
Is it possible to do at all..?
The goal of this is to load a heavy Flash movie, after the images, text, and contents of my page is finished loading...
Any solutions..?
More details:
The Flash movie (a music mp3) is loaded in a frame (menuFrame) with the menu. The content (that needs to be loaded first) is in another frame (contentFrame)...
$(window).load(function() {
// this code runs after the page finished loading
});
$(window).load() is exactly what you are looking for. The event fires when the whole page, i.e. the DOM plus all image resources, has loaded. From the docs:
The load event is sent to an element when it and all sub-elements have been completely loaded. This event can be sent to any element associated with a URL: images, scripts, frames, iframes, and the window object.
Try:
window.onload
or Jquery version:
$(window).load()
A frame cannot "look into" another frame, only access its parent (frame-->frameset, iframe-->parentDocument). So you cannot implicitly wait for another frame to load. If you control the other frame's content, then you should publish an event here, like window.callMeWhenLoadIsDone=function(){ alert('hey'); }; and in the other frame you would "reach out" to call it like $(window).load(function(){ window.parent.callMeWhenLoadIsDone(); }). This assumes you are the code of the main page in a page/iframe setup or the frameset code in a frameset/childFrame setup. And of course note that framesets are deprecated. ;)
I'm experiencing problems with $(document).ready not getting executed in IE6, but only after clearing the Temporary Internet Files (so in fact the very first time this page is loaded). On refreshing the page or on later page loads, everything works fine.
This is the current setup:
Portal page with frames, this portal page also has a window.load method (maybe we have a race problem with jQuery ready ??):
window.onload = function () {
try {
expireCookie("COOKIE%2DID");
loadMenu();
} catch (pcbException) {
reportError(pcbException);
}
}
In this portal page, our current page gets loaded. At the bottom of this page we have:
<script language="javascript">
try{
$("#CR").remove();
}
catch(ex){
}
$(document).ready(function() {
alert(typeof $); // check if method is getting executed
RendererPageIsLoading(); // loads data in comboboxes and hides divs
});
</script>
</body>
I'm using the latest version of jQuery (1.4.2).
Edit: jquery is getting loaded in the head section of the current page:
<script language="javascript" type="text/javascript" src="https://fulldomain/js/jquery.js"></script>
Following topic didn't bring any solutions:
jQuery $(document).ready() failing in IE6
Someone suggested (he did remove his answer later on) that attaching a method to the window.onload did detach the method defined in the $(document).ready() event. However since the error only happened the first time the page was loaded, in my opinion this had to be a cache problem.
After further investigation we found out that IE6 was having problems with a transparent png that didn't get loaded correctly. Therefor the browser is waiting for the image to load and IE6 waits on images before it triggers the DOM ready event.
Conclusion: also check for transparent png images if having problems with IE6.
If you are adding a script immediately before the "/body" tag, you don't need to use:
$(document).ready(...);
As the document IS ready (bar from "/body" and "/html").
It is really useful if you have an external JavaScript file that may be loaded faster than the page - in which case it delays the execution until the DOM is ready (or in some browsers the DOM and HTTP requests... which is more like window.onload, which waits for all the images, for example).
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.