Most browsers show a spinner in the tab at the top of the page when a page is loading. It's a standard way of showing that the browser is in the process of fetching something.
I'm writing a client-side ajax app, and would like a generic way of showing that an ajax call is in process. Rather than finding some element on the page and sticking a spinner on it, is there a generic way in javascript to access the browser's spinner?
There are only two things I can think of that are similar to what you want.
#1: changing the cursor (idea from #Jasen in the comments of the question): you can simply set the cursor css property of the body to wait whenever you have an Ajax request running.
#2: use a hacky iframe. Basically, create a server side page that loads headers, but doesn't end the request. When you want the loader symbol, simply create an invisible or off-screen iframe with that url, and remove it when the request completes
Unfortunately, there is no "official" api that defines a simple way to do this (e.g. there is no such thing like window.startLoader() or window.stopLoader(), for example)
Related
I have an endpoint that takes a long time (about a minute) to give a response. I want to call this endpoint from a Wordpress website while wp_remote_get and wp_remote_retrieve_body are running in the background, but I always get the page loaded only after the request is finished.
Is there a way I can add some lazy process so that the page can be displayed and the user gets a 'loading, please wait..' message until the request content is retrieved? I have seen many methods for image lazy loading but not for an arbitrary php run in the server. I also want to hide the get url from the page source script, all js get solutions seem to expose the url requested.
Here's what you need to do.
Create your page -- maybe in your template -- with some placeholder text. Something like this might work:
<div id="jimmys-lazy-loading">
loading, please wait...
</div>
Extend the WordPress REST API by adding a custom endpoint to the code you're writing (your plugin or theme customizations, maybe). When you hit this REST endpoint from your web page, it will in turn hit that slow endpoint, retrieve the data, and return it.
Write some Javascript that hits your REST API and then replaces your placeholder text with the stuff that you got back.
Or, if your slow endpoint allows itself to be hit directly from your users' browsers, write your Javascript to hit it and replace the placeholder text.
Once you get the basics working, you can make a fancier "wait" display, maybe with a spinner.
It's hard to give more specific advice without knowing a bit more about what you hope to do. Don't hestitate to ask another question if you still need help.
I want to make a jQuery AJAX page load with a progress bar at the top. I have found an example of what I am trying to achieve here.
I could use a pointer on where to start.
I intend on using it in a WordPress site.
Take a look at this reference page. Specify a callback for onreadystatechange. A simple loading bar would just increment the bar a little bit as the readyState changes. This might be what the linked site does, and this is what modern browsers do (they switch the loading icon once the headers are received or once a connection is made). A more complex loading bar would read the headers received from the request when HEADERS_RECEIVED, then compare the content-length header (when LOADING) to the number of bytes received so far:
Downloading; responseText holds partial data.
This technique might be too much trouble to for the value added. AJAX is typically designed to return light-weight data so loading time shouldn't be long enough to really need a fine-grained loading bar.
You might have to implement this differently if using jQuery, but the algorithm is the same.
In my company we have a web-based tool that you enter an account, press a button, and the page takes a little bit to load, then loads account information. There are several different pages that do the same thing but load different information. I have already been able to make the sites load with direct URL execution (with an intermediate page and some JavaScript) so I only have to enter their account number once. My problem is, I want them to pull up all at the same time to speed things up, but there is some kind of lock that does not let you run the lookup in two pages at once. I want to make my site load the first page, then wait til it loads and immediately begin loading the next page in another tab on my page. Is that even possible in HTML and JavaScript? If so how, if not, what other language do I need to learn today?
check out the jquery's $(document).ready();
simply use
$(document).ready(function () {
//execute script that calls another page, you could use ajax
});
other method is using iframes, which i personally don't recommend
Do you mean something like Pageflakes?
If so, you will need to utilise AJAX (and/or webservices). A good tutorial/source code on building something like this is at DropThings (which is from the same author as PageFlakes).
This is using ASP.NET C# and AJAX Control Toolkit.
If the two URLs are loaded into separate <iframe> elements then you just need to create a load event handler for the first frame to set the src attribute of the second frame.
Some operations are time costly and it takes long time while waiting them to finish.
Sometimes timeout occurs.
I want to use a real time progress bar, so I want to show the status to the user and also I want to prevent timeout. Which technologies must I use? JS, Ajax, multithread or both? and how can I iplement this?
Please advice.
I'd recommend using a library like jquery.
Here are some links:
jquery progress bar link 1
jquery progress bar link 2
Enjoy.
The easiest thing I can think of would be to implement a progress variable linked to the session (or a unique id) which is updated every so often by the slow-loading script. You can then have a 2nd page which returns the current contents of this variable. Query the status variable via ajax every few seconds to update your progress bar.
Alternatively, you can use this method without ajax. Basically you flush a script that displays a progress bar to the browser from the slow page. As the page continues loading, it flushes javascript update() calls every so often to update the bar.
http://devirtu.com/2008/10/16/making-progress-bar-of-page-loading/
If you are using an javascript and ajax, you can call / initiate the process(in server) from java script using an ajax call.You can show the user a loading image till you get a response back from the server. www.ajaxload.info allows you to generate your own loading images. have a look # it.
if you use jquery ,things would be much easier.
Check these links
http://docs.jquery.com/Ajax/load
http://www.shawngo.com/gafyd/index.html
Cheers
I'm trying to implement fire-and-forget on an img src=... call from a web page, and am looking for the most solid method. Why?
In most Web tracking systems like Omniture or Coremetrics, there is a request for an img src which also happens to carry all the data for the tracking system to record. Like any other image request, the page tries to wait for the response, potentially slowing down the page-load.
What I'm trying to do is implement a tracking system where webpage response time is a much higher priority than whether the request was actually successful, and therefore waiting for the response is totally unnecessary under all conditions, which include...
The server received the request, and can readily respond (HTTP response code 200)
The server received the request, but is bogged down and can still readily respond with an error 500 response code
The server is not running at all
The server was not found due to DNS glitches
The request hit the server, but is so bogged down that it's taking noticeable time to respond.
I have already investigated using the XMLHttpResponse object and an asynchronous request that can quietly fail, but you quickly run into the same origin policy and browser compatibility code bloat. I believe a plain jane img request is still the best request mechanism, but am trying to work out the best fire-and-forget implementation with the smallest amount of code. So far, I know I can...
onerror="this.parentNode.removeChild(this)"
onload="this.parentNode.removeChild(this)"
This works pretty well on scenarios 1 through 4 where there is a finite and predictable conclusion to the request. It breaks down in scenario 5, which could be avoided if there were something in-between.
I'm toying with the idea of seeing if this.src.readyState == "complete" but see that I am heading down a road of browser compatiblity and race-condition hell were it would be wise to tap the StackOverflow community first.
Anyone have experience with this and a good solution?
Why not just add the img tag to your document after it loads?
You need it to be loaded asynchronously. Google do one, if you want something a bit more heavyweight, eVisitAnalyst do a similar thing.
The brucey bonus of having it done asynchronously is that if the .js is unobtainable your page doesn't need to wait for it.
My PoV: User experience comes first, tracking comes next. I have used WebTrends/Omniture & Coremetrics and yes they do give very fine grained details (and later you can segment it the way you want) about the request. Even without these web analytics vendors implemented, you can get a lot of information from your server logs, you just have to do the segmentation yourself (you can log IPs-depending on your Terms & Conditions- and Omniture/Coremetrics do it anyways,Pages requested,action performed like checkout,add to cart, etc).Though these web analytics vendors are very aware of performance and they just send you 1x1 pixel as a response, if their server were slow, your user experience is bad (sometimes happens with google urchins for me, I wait for this one image to load for a very long time). I would think the best way to implement this would be after the document has loaded (jQuery - Document.ready ? ) and then append the <img src="vendor url"/>to the html dom.Even if the request fails or takes a long time, now the user does not feel that the site is unusable
As the other answer suggests, you could simply add the img tag to the image after the document loads.
This brings about two subproblems: 1) how do you know when the document is loaded and 2) how to add the img tag. I suggest using the $(document).ready() from JQuery for 1) and some DOM manipulation for 2) (also with JQuery).
There are methods of detecting when the document is completely loaded and inserting a tag, but using a framework (alternatives other than JQuery should be OK, I'm just suggesting something I know works) saves you some effort, especially when it comes to making things work on multiple browsers.
EDIT: typo
You can POST with a form that target an iframe(same or different domain is ok).
And after you make the call, you can remove the iframe or reuse it.
Here is an example:
<form target="targetIfr" action="http://domain.com/" method="post">
<input name="data" type="text" value="hello" />
</form>
<iframe name="targetIfr"></iframe>
You can call it like:
frm.submit();
ifr.parentNode.removeChild(ifr);
This is an old question, but it starts off with misinformation and I didn't see anyone correct that. CoreMetrics and Adobe and many others do not use image requests that load on the dom, that can block the page, they use JS image objects, like, outImage = new Image();
That doesn't get attached to the DOM and doesn't block in the same way as an image tag would. The 1x1 pixel reponse is just to match up with the MIME type btw.
Any JS that is loaded to implement tags has far more impact.