I am creating a simple animation of images in my application. There are multiple images in the document. I want that when the page loads the images should start to animate. I tried with this:
$(document).ready(function(){
$(".slide").animate({
left:'250px',
opacity:'0.3',
});
});
On my local server I get the desired effect since all the images are loaded instantly but when I run the same code on hosted server I do not get the desired effect. The image that loads first in sequence starts to animate while others animate as they loaded.
I want to all images to animate in parallel rather than serially. Can anyone tell me how do I ensure that images are loaded so that I can then animate all of them?
Simply change $(document).ready() function to $(window).load function as:
$(window).load(function() {
$(".slide").animate({
left:'250px',
opacity:'0.3',
});
});
The reason behind doing so is that ready event is fired when DOM elements are ready to be manipulated irrespective whether content inside them such as images, videos etc are downloaded or not where load event is fired when all the content has been downloaded as well in DOM elements.
If all your images are in the HTML of the document (none created dynamically), then you can simply switch to use $(window).load() which will not fire until all images in the page have finished loading:
$(window).load(function(){
$(".slide").animate({
left:'250px',
opacity:'0.3',
});
});
Exactly, the dom ready status means all the essential stuff is loaded and the page is ready to be interacted with. Images continue to load in the background.
What you need is the window.onload event:
$( window ).load(function() {
$(".slide").animate({
left:'250px',
opacity:'0.3',
});
});
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'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 have a page that takes information from a database. It exports a lot of information, so it takes a few seconds to load. I do have an animation, but it is not behaving how I want it to behave. When a user clicks on a link, I want there to be a loading animation instantly, and it shows until the data on the page actually loads.
Here is what it actually does:
When I click on a link, I wait 5 seconds, then the page loads with the animation, then the data loads. The problem is that I want the animation to run instantly, not wait 5 seconds, then run for half a second, then the data loads.
Here is my current JQuery code:
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").show();
$("#content-loading").hide();
})
})
content is the content that takes a while to load and content-loading has the loading animation.
$(document).ready() will only run when the DOM is done downloading, basically when </html> is downloaded at the end of your page. If your database data is part of the page, it will be loaded by the time the DOM ready event fires. Meanwhile, $(window).load() will fire when all the resources on the page have loaded; all the images, external stylesheets, etc.
Perhaps you could have a stylesheet before the data which hides the content, then an internal stylesheet at the bottom of your page, after the data, which makes the content display and the #content-loading element hidden?
Otherwise, you could load the data asynchronously in some way, with AJAX or in a frame.
http://fgnass.github.io/spin.js/
See this, if you want to add a loading.....
your animation won't run until the whole page is loaded (including all that db stuff). Instead, load a page that has just your animation, and an AJAX call to the db data. Then the db call is asynchronous.
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).