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();
})
Related
I'm making a website, and I have a problem. Or more exactly, I don't know how to solve the blank page problem.
I'm making a website, where if you swipe right, some data will be inseret in the database, and then the webpage will refresh. After refresh, a blank page is shown, and then the normal webpage with all it's html.
How can I put a loader image on the blank page before the DOM is ready? I'm using jquery and jquery mobile.
The webpage is this: http://meetmean.comxa.com/KlausApp/home.php . If you swipe to right, or left, it will show you an alert box, and then the page will refresh. I want the blank page that is shown after to be a loading image.
I had kind of the same problem and my solution is:
I covered the (blank one you were talking about) HTML page with a full screen black background and a css animation in the div , and I hide that div when the page is fully loaded using JavaScript
window.onload = function () { $('body').toggleClass('loaded'); };
This function will run when the all the content in your html body is fully loaded.
This code will add a class named loaded to your html body,
in my style.css file the loaded class will hide the full screen div. it was one of the ways to have a loader in your page and it's up to you , there are many ways to do this.
Take an SVG animation file and keep it wherever you want to show it in the page.. Previously keep its display property none ..if you are using (jQuery) AJAX (i.e. $.ajax()) to fetch the data you can use the on complete callback function in the AJAX options to fadeout the SVG when the animation comes.
function ajaxCall(){
$("#svg").fadeIn("slow");
$.ajax({url: "demo_test.txt", complete: function(result){
$("#svg").fadeOut("slow");
}});
}
Here as soon as the function is called the SVG animation appears.. and soon as AJAX gets response the SVG is faded out.
You can get loading animations from http://loading.io
You could use some of loaders from this page: https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html
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',
});
});
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/
The ideas is to show the loading div while the image is loading and hide the div when finished. This code works on Chrome/firefox but not on IE. Any idea?
Html file
//image
<img src="image.php" class="loading">
//loading tag
<div id="loaddiv">
<div id="loading_float"><img src="src/img/loading.gif">
<br>Loading..
</div>
</div>
JS file
var imgs_count=0, imgs_loaded=0;
$(function(){
$loading = $('.loading');
if($loading.size()>0){
$loading.load(function(){
$('#loaddiv').hide();
});
}else{
$('#loaddiv').show();
}
});
You cannot reliably use javascript to attach onload handlers to an image that is in the page's HTML. That's because the image may already be loaded before your javascript even gets a chance to run as the page DOM (and images referred to by it) starts loading before javascript has a chance to run and find those very DOM elements. This problem is worse in IE once the image is in the browser cache as IE loads the image pretty much instantaneously in that case.
There are two possible work-arounds:
Specify the onload handler in the actual HTML with the onload attribute.
Don't put the images in the HTML of the page. Use javascript to create them dynamically and assign onload handlers before the .src attribute is set on the image object so you are sure not to miss the onload event.
When your javascript runs and before you install the load handler, check to see if the image is already loaded and act accordingly.
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.