Is there a way to tell browser to show a loader image while a page is loading in background?
I am building an app which is basically a html5 app which will be loaded on webview. All files will be located on device itself, there is no interaction with server so AJAX can't be used.
If user navigates to other page then immediately loader should appear and then hide when page is completely loaded.
Is this something that can be done using JS?
Thanks
UPDATE:
I did exactly as mentioned by you all, showing loader on document ready, also showing it while page is getting unloaded and then on document ready, but the loader is not visible during the time when page has unloaded and the other page has not yet downloaded. Is there a way to bind loader to browser rather than a page?
You can place a loading screen over all content (position:absolute, 100% width and height) and fade it out when the page is ready.
demo: http://jsfiddle.net/G8GkA/
<div id="page">
<div id="loader"><span>loading...<span></div>
content....
</div>
fade out on load (using jquery):
$(function(){
$('#loader').fadeOut();
});
You could do something like this
<body>
<div class="LoadingStyle" id="LoadingInfo"></div>
<div style="visibility:hidden" id="Content">
<!-- All your content goes here -->
</div>
</body>
and in document ready you could do as such
$(function() {
$("#LoadingInfo").hide();
$("#Content").css("visibility", "visible");
});
The basic idea is to show something while document is not ready.
EDIT
You could play with it. It is not necessary to hide the content. You can overlay it with an absolutely positioned div and hide it only.
Have a page(PageLoader) which will load other pages using ajax, then the loader can be shown.
The PageLoader will take the page name as parameter and load the page.
Related
I have a Ruby on Rails app that uses Twitter Bootstrap.
On a page, there is a carousel that uses large images. Because on this, I show a loading GIF on the page until all the images are loaded.
So, initially, there is the GIF
<div id="loading-div" class="centered">
<img src="<%= asset_path("page-loader.gif") %>" />
</div>
And after the page is loaded, we hide the carousel, wait for one of the images to load, then hide the GIF and show the carousel. But sometimes, the onload event is called. E.g. when I've already visited the page and I navigate somewhere else then navigate again to the carousel page.
Here's the JavaScript:
$('#home-carousel').hide();
$('#first-image').load(function(){
$('#loading-div').fadeOut(function(){
$('#home-carousel').fadeIn();
});
});
Is there anyway to recheck if the image is already loaded? And if so, don't display the GIF?
Is it possible that the image is loaded before the "onload" and "hide()" are set for the carousel and image?
What's the best way to handle this kind of scenario?
Thanks for your time.
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 already know how to do a "Splash Screen Div" for a loading page, just wait til everything is loaded and then hide the div or move it off screen.
E.g.
index.html
<div id="loading-Div">
<div id="bear-Logo">
<div id="target">
<div id="target2">
<div id="bearloop"></div>
</div>
</div>
</div>
</div>
loading.css
Just a class called 'fallback' to move the absolute-ly positioned div offscreen.
loading.js
$(window).load(function(){
$( '#loading-Div' ).addClass( 'fallback' );
});
The above is a rather crude example of a "loading Splash Screen Div", I don't know what else to call this, and the .css is imported in the <head> with the .js just before the end of the <body> tag.
This works fine if you click a link and want to show the div while the page loads, but I would like the div to be shown the second the link is clicked, until the destination page is loaded.
Workflow:
http://i.imgur.com/dIOZSMS.jpg
Key Points:
I have a feeling this is only possible with a browser plugin because:
The link isn't an anchor to another div. E.g. url#div -> url#div2
Based on the above, given that the link is to another .html page the content currently displayed would... stop based on how pages are displayed in nature.
Note that:
This is strictly intra-site.
I don't care about IE.
This isn't homework, nor for a client. I am learning web development and thought this would be a cool page transition, per se, and cannot figure out how to do it nicely.
I would prefer not do have an animation and callback for outgoing links to display the div, and then incoming links to display the div as a faked-coherent animation mainly because it wouldn't be coherent unless the download of the second page was instantaneous and because, even if the former was the case, far too much code and therefore file size would go into a coherent animation of whatever the div was to display.
Any ideas guys? I am very stumped on this.
Since your Javascript is at the bottom, it'll load asynchronously, after the page.
index.html
I don't understand why you nested the DIVs that way. Will the page load inside the logo element?
loading.css
With moving the div off the screen, is it part of your animation?
$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);
loading.js
If you want to show an element after the link is clicked, just do it without the window.load function.
http://jsfiddle.net/Etd2D/
I have a flash page which takes quite some time to load, but I want to show something to the user the instant index.html is loaded but I want it to appear on top of the flash content, preferably at the top middle/center and remove/unload the script once the flash starts loading. How can I go about doing this?
Thanks
as far as I see, you are not able to create a "dialog/overlay" over a flash on most of the browsers( FIREFOX, IE...). so I suggest that you "hide" the div of the flash when the flash is being loaded, and "show" the div of the flash once it's been loaded. e.g.
<!-- when flash loading -->
<div id="wrapper_of_flash" style="display:none">
... flash element here
</div>
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.