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.
Related
I have a PHP based website.
I have used service-workers and manifest.json to convert the website into a PWA.
Now when I launch the PWA from my Homescreen, it works normally like an APP. But, the problem is that since PWAs does not show browser address bar, user has no way of knowing that the page is being reloaded or the next page is being loaded. When they click something next page gets loaded but no loading indicator is shown.
So, now i need to add loading animation while navigating between pages. As all pages are at different URL and their is no master frame.
I'm not able to figure out some solution.
Theory
What you need to do is to show a loading animation at two times in a page's life cycle: at startup and before closing down. If you do that, first page's closing animation will take user to second page's starting animation, and user will be informed by the state of the app.
Practice
1) Starting animation
I think document.ready event of jQuery is a good time to let the user to interact with the page. So the loading animation will be active/shown when the page is loaded. And you will end the animation once the page is loaded and ready for user interaction.
The .ready() method offers a way to run JavaScript code as soon as the
page's Document Object Model (DOM) becomes safe to manipulate. This
will often be a good time to perform tasks that are needed before the
user views or interacts with the page, for example to add event
handlers and initialize plugins.
2) Ending animation
For this, I use onbeforeunload event of the browser.
The beforeunload event is fired when the window, the document and its
resources are about to be unloaded.
onbeforeunload fires automatically when user clicks to a link or otherwise triggers a navigation process. So just by listening to that, you can start your ending animation.
Then ending animation will start as the user triggers a navigation, and will be welcomed by the starting animation of the next page. So there will be transition starting with a user click and ending with next page loading. Just like apps do.
The code
Here's a snippet from the code I normally use;
$(function () {
// page is loaded, it is safe to hide loading animation
$('#loading-bg').hide();
$('#loading-image').hide();
$(window).on('beforeunload', function () {
// user has triggered a navigation, show the loading animation
$('#loading-bg').show();
$('#loading-image').show();
});
});
Here's a fiddle also with complete styles and HTML
Hope that helps.
I have two different pages.
index.html
page2.html
I have a button on index.html which would take us to page2.html,
but its a direct transition. Where as I was looking for a fade in transition to happen when first page switches to second page.
I don't have to come back to first page so we don't need any transition from second to first.
Could anyone please help.
Thank you
There would be three ways to really make this happen. You can't transition from one page to another if the browser is loading the new page in the address bar besides using a fade out and a fade in on the new page. However, there are two other ways to get animation of page loads running. The first of which is completely inadvisable because it uses an iframe and can complicate communication between the frame and the page it's loaded on.
Here are the three algorithms:
Add a fade in animation on the "body" element when the pages first load and make all links on the pages trigger via javascript. When the Javascript navigate function is called, fade the page, and then execute the location change on the animation callback. Since all of the pages have a fadeIn, this would appear that the page is "transitioning".
(inadvisable) - iterate an ID and on each new request, load a hidden iframe above all of the content and give it the incremented ID. also before creating the frame apply an onLoad handler to the frame and make it animate the frame when it's loaded.
Use AJAX to load your content into a container and you can animate it based on when the ajax request starts and gets a response.
I assume you were looking for algorithms, not code samples. Hence the verbiage.
I'm not sure what's the best way to create a loading page while my application is doing something at the backend and it takes quite a bit of the time to process. What I'm doing right now is to have a page with a loading gif and then use javascript to redirect to the page which takes a long time to load.
%img{:src => "/images/loading.gif"}
:javascript
$(function() {
window.location.href="/detail"
});
So the /detail page takes around 10 seconds to load. In this way, while /detail page is loading the browser will show the loading gif spinning. Is there any more other way to achieve this?
Here's what I'd suggest:
Start the background task using Ajax.
Display the loading gif after the Ajax call starts. See here.
When the Ajax call is over ($.ajax.complete) and returns an expected response, redirect the user.
I want to show preload image while main page is preparing and then loading. I think I can't use Ajax, because I need to reload whole main page. I want to implement next: First, I request the preload page and a server sends me it. Second, the server start to form main page(It takes about 15-20 seconds).
Third, when the server ends his work it send me the main page. But how can I implement 3rd part?
The second idea is separate the main page on 2 parts. One of them is the preload page which contains whole main page's contents without 'busy time' contents. And then use Ajax to load 'busy time' contents.
What do you think, colleagues?
Try this. You'll need a loading spinner element. Also, the $(function(){}); activate when the DOM (html structure) is loaded. That's the closest you'll ever get to when the visitor first reaches the page. The body element is hidden, then waits till all the images and everything all fully rendered and the CSS and Javascript files are loaded and working, then it crossfades from the spinner to the content and removes the spinner.
$(function(){
$('body').hide();
$('html').append('<div id="loading-spinner"></div>');
$('body').load(function(){
$('#loading-spinner').fadeOut('fast').remove();
$(this).fadeIn('fast');
});
});
You'll need some CSS to apply a GIF to the background of the loading spinner element and center it:
#loading-spinner {
width:100px;
height:100px;
background:url(loading.gif);
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}
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. ;)