I have a page that is querying a rather large database & then showing the results on the next page. I'm trying to show a loading spinner on the first page while the query is happening before it redirects to the results page.
Everything I've found is just showing loading spinners for ajax calls?
In your case, you need to use a Page Loader. A page loader is any kind of animation that visually communicates to a visitor that the page is loading and to just sit tight for a few seconds. Without a page loader, a visitor might think your site is being unresponsive and just click away in frustration. A page loader also provides a small distraction which can actually make the wait seem much shorter.
You can use this: https://css-tricks.com/css-page-loader-example/
If you want something more cool and modern, try one of these: http://github.hubspot.com/pace/docs/welcome/
Related
I want to load more images in my website when I reach the bottom of my page. I'm using php and postgresql as my database.
For this post I simply load some text instead of image. I can write the code for it's equivalent.
So currently, I'm using a button at the bottom of my page, which when pressed re-loads the page and gives you more images(I'm displaying 50 images at a time).
But there are 2 problems with it, one being that the user will have to press the button again and again while I want it to happen automatically.
And the second one being that when new images are loaded, the previous ones are gone. I don't want to happen. For eg., if currently 1-50 images are present, my page later changes it to 51-100 while I want it to have all 1-100. I'm unable to solve this.
Please help. Thanks!
What you are looking for is commonly referred to as "infinite scroll pagination", while what you're asking for is techniclly possible using only PHP it would be a terrible user experience, as each reload would take the user to the top, and they would constantly have to continuously scroll further and further just to reach the location they were previously at.
Alternatively, handle this with JavaScript, an example: https://infinite-scroll.com/demo/full-page.
Doing simple Google searches reveals a plethora of options for JavaScript and JQuery plugins to achieve this.
An alternative, without the need for a plugin you can implement the answer to this:infinite-scroll jquery plugin
Simply call your PHP code in the form of an AJAX request when the bottom of the page is reached and append your new results. (this could be easily achieved with vanilla javascript as well).
Hope this helps.
How can I give a feedback to the users by showing a loading bar, similar to what browser displays on the place of favicon.
The thing is, I am not using a javascript or ajax, I am calling an API, which will take time to load, I just want to give feedback to user by showing a loading bar, which will stop as soon as the page is finished loading.
In straight words, I want to exactly show what the browser shows - a loading animation, but this loading animation should be in the page, so that the user will know what is going on.
How can I do this? I am using PHP in the backend
I think what you're looking for is a preloader. Check out this tutorial to see the exact code to accomplish it. Essentially you're creating a large overlay in HTML/CSS that will disappear when the JS code detects the page is finished loading.
I've created a website with only one page. On this page, i can click on images and i show or hide popup (with jquery).
It works fine.
All these popup contains text, images (i use php to generate this content).
<div id="pop_up_1>
<!-- content : text / images -->
<div/>
<div id="pop_up_2>
<!-- content : text / images -->
<div/>
and so on
It's like i have 10 pages inside one page. It's a lot of content.
Do you think it's better to load everything at the beginning or load the content with jquery ajax :
$("#myDiv").load("ajax/video-mur-images.php");
I've tested the 2 solutions and i'm not sure which one to choose.
The first one : everything is loaded and no more query after but a lot of source code and elements.
The 2nd one, less elements and less source code but i have to load the content when the user click on a button.
I guess it depends on how much data i need to load. So what is the limit i should consider ?
This is an interesting philosophical question. Often, as you do now, developers start with data volume, but in the end it's all about user experience.
Does your page load slowly? If so, have followed the best practices to speed up page loads? And what would annoy the user more -- initial load or to have to wait on each interaction?
Also note that while web crawlers for search engines are getting better, they do not load your AJAX content. When you decide to go on this path, use a framework that gives you bookmark capability and also makes internal links understandable to the crawlers.
It's definitely better to use AJAX (or even better PJAX) to load the content. Simply because you don't know how many pages there will be in the future. Serving all pages in a single request means that you might do 50 database queries, while the user only needed the page that does 0 queries.
My website is setup like: when the page loads, a jQuery animation -- in the template -- is played which, on completion, further makes an Ajax call to fetch the content of the page. Now, I want to deploy hashbang like http://com-address/#!page and I need to retain the animation at the page load as well. But I assume the problem with this setup is; when the web-crawler visits the page, it doesn't wait for the animation to complete and make the Ajax call. It requires the state of the page with the loaded content (which, in my case is acquired after the animation is completed).
Given the above scenario, which way is better:
Change the entire flow and load the page content preemptively and hide it
till the animation is played.
Only when the hash-bang or _escaped_fragment is found in the URL:
a. follow step 1.
b. load the page with the content without animation.
My assumption about the web-crawler is incorrect & let the
current flow as it is.
Any heads-up advice?
EDIT
#kdzwinel, thanks for the tip about text-browsers!
On the second thought, I'll go with the option 2(a) because when the crawler visits the resource with fragmented URL, it should get the full resultant content on the page. And if the user navigates directly to the fragmented URL, the user-experience with animation would be intact too (by removing the content on the dynamic content fragment between the page load and the animation starts).
Also for all the other scenarios, we would continue the old flow (animate then fetch via Ajax) because we don't want to refresh the page since the user is already visiting the website and trying to navigate smoothly/seamlessly using anchors with fragmented URL (binding their click events to begin animation).
Web crawlers don't execute javascript (webmaster guidelines -
If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.
), if you wan't your content indexed go with option #1. Load the content when page is opened and if browser supports javascript - hide the content and show the animation.
I want to include a page preloader for all pages on my application. Something like what Gmail displays when its loading the entire page in the background. I don't want a prelaoding bar just the mechanism to display immediately a preloading message while the entire page loads in the background and upon successful load is displayed.
Take for an example the site: http://www.emirates.com/ae/english/ just run a search for any flight - you see a preloading message after which teh page is loaded. I don't see any redirects here.
How do I implement this - my site is built using php and tonnes of javascript.
Your HTML writes out a pre-loading message, and you then set up a javascript onload event. This event calls JavaScript code to load whatever data you need via AJAX, then finally hide the loading message and shows the actual page.
Of course, this means people with no JavaScript will have problems - you have to sort something for them or decide you can live without them.
ADD: Oh, and you may want to check the disability laws in your country before deciding you can live without them - you may have a legal responsibility to make your site accessible to the disabled. I've only ever used this technique on sites that rely on JS so heavily they can't run without it. Note GMail has 2 interfaces - one JS and one plain HTML. This is how they make their service accessible.
ADD: http://code.google.com/p/bobchess/ is some code I've done that does this. A loading message and then an onload event to start the application.
I would use a wrapper DIV element for all the content of your <body> element and hide it via CSS visibility property. Did work with javascript and at the end I would display the DIV element. The preloader would be absolutely positioned and hiden when DIV element would be displayed.
Visibility property has the advantage that the layout will be ready when you change it to value visible (not as with the property display)
EDIT: I think that you can almost always avoid pre-loaders. You can speed up your sql queries by indexes. Display less results and so on. I personally don't like to wait and preloader doesn't comfort me much.
I agree with MartyIX but the problem is the number of queries your system can handle, indexing is an option but it depends on volume of transactions on your servers. I do think we missed the whole point though, pre-loaders we meant to beautify the site, so the customers don't see ugly blank page while they wait :)