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!
Related
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.
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 posed a question that related where I could display "Page loading" in asp.net page using jQuery. But, I had no luck.
So, say I have page1 and it navigates to page2 and page2 doesn't some heavy data access. Is there any way I could show the "preloading" page while the page2 is finished.
I want to navigate from Page1 -> "Preload" -> Page2(once page2 is completed).
I want to know if this is possible using Javascript in the code behind.
Thanks.
The way you would typically do this is have a page that shows the message and uses AJAX, in my example using jQuery, to load the other page onto the current page.
<body>
<div id="content">
Page loading
</div>
<script type="text/javascript">
$(function() {
$('#content').load('/url/to/other/page');
});
</script>
</body>
I've omitted loading jQuery itself.
Note: you could do this on a single page by having it generate different content based on some query parameter. You don't need to actually have a separate "loading" page -- though you could probably make that work for several different pages as well.
If using JavaScript is OK, redirect the user to the Preload page, and then use JavaScript to take the user to Page2. This will make the Preload page stay visible while Page2 is loading.
(Also, "JavaScript in the codebehind"? Don't tell me you're using JScript.NET or something as your server side language)
No matter what you do, to begin loading Page2 you'll have to navigate away from Page1 (unless you get complicated and wrap your pages in another container on a single page and navigate within your container).
Otherwise the default content for Page2 should be a "Preloading" message that gets taken away once the document has finished loading its content.
Is a possible solution to have an almost empty page with a few placeholder divs in the right places containing a loading image. Then run web service calls to populate each placeholder in jquery/javascript?