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.
Related
What is the best attitude to display an animated loading page when waiting for an actual response from controller?
The controller takes quite some time to give a response and I want to display a gif in between. So far I have tried 3 solutions:
1) Display gif on window load -> doesn't solve anything as page loading itself is very short and it starts only after you get a response from controller.
2) Display gif on submit button to redirect to another page -> displays gif nicely but it doesn't animate.
3) Check referer of the request and if it's different than the page itself, then redirect to loading page which immediately after loading itself redirects to desired page. Here animation sometimes occurs but stops before the next page is loaded entirely.
Is there another approach for that? Thank you in advance!
My requirement is I have an ASP.NET web page which is taking some time for loading first time because it has a custom control(ascx) of grid and some other buttons. Also I have some other buttons,check boxes, print reports (ssrs report) in my web page, on click of which it will take some time to process and comeback with result. So my requirement is whenever my page load first time or any server request process I want to show loading indicator to the client user by restricting any other action in the page until the result come up and page is ready.
I have the same solution as that already mentioned in How to show Page Loading div until the page has finished loading which already there in stack over flow. But in first research I haven't seen these answer that s why I put this question. I hope it is the best solution so far.
I have a PHP script (download.php) that receives Form Post data from the index.php page.
The processing takes a while to submit the form thus making the browser loading (the spinning wheel) for quite some long time.
Can I force the browser not to show the gray loading wheel until the form is submitted and the Post page (download.php) is done and ready to display?
For example like Youtube is doing now, they show a progress bar on top but the browser is not loading at all.
To achieve an effect similar to youtube you would need to use AJAX in conjunction with the history.pushState();.
Youtube has released a framework called spfjs for achieving the same effect that their own website has. Take a look at https://youtube.github.io/spfjs/.
If you click submit button and move to download.php, the web browzer will definitely show a loading tab. To avoid this, AJAX can be used.
Once the form data are submitted by means of AJAX, you can also receive back the download.php page contents ready to be displayed using the same AjAX response. Then hide the contents of index.php and place the received html instead. I hope it will work, for I am using this method.
Thank you.
A page I am testing has a button that takes you to a different page on the same site. After clicking on that button, I want to wait for that page to load before continuing. Normally, I would just wait for some element on that page to load, but since I recently updated nightwatch/selenium, that waitForElementPresent() test has stopped working. In the process of debugging the problem, I thought it made sense to wait for the new URL to load, but I don't see a nightwatch way to do that. I can hard code a wait with a pause() followed by an assert.urlContains(), but there's got to be a better way. Any suggestions?
What used to work:
this.waitForElementVisible(runCSS,3000)
.click(runCSS)
.waitForElementPresent(newPageElementCSS,5000)
but now it times out on the second wait, even though I can clearly see the new page on the browser display (Firefox 45.0.1 on Windows 8.1).
Wait for something (a selector) that is unique to the page that will be loaded after the click. It can be anything as long as it doesn't exist on the current page.
For example,
This would wait for <div name="Thingy"> anywhere on the page:
client.waitForElementVisible('div[name="Thingy"]',3000)
I guess, in Nightwatch.js, wait for the page to load can be achieved using 'body' element of the DOM. Suppose, if we want to wait the page for 1 second. we will achieve it using the command .waitForElementVisible('body', 1000). The second parameter is measured in ms.
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.