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.
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.
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/
This might be a stretch, but I'm wondering whether or not it might be possible.
I'm working on a website that uses PHP for its backend. The problem is, some of the PHP scripts I'm running are quite lengthy, and can translate into page load times that can last a few seconds.
Ideally, I would be able to display a loading icon whenever the page is being loaded, but the circumstances differ depending on the page:
In some cases, the page is being loaded for the first time,
In others, the page is being reloaded after a same-page form submit,
Sometimes the form is processed by an off-page script, which then redirects back to the page on which the form is situated (in these cases, since nothing is echoed in the external script the user isn't aware that the script is being processed elsewhere as the page content doesn't change).
I understand a loading icon could be displayed in each of these cases depending on the trigger, but cannot find a general solution that would display an icon whenever the page is simply loading (regardless of the trigger).
I've noticed that some browsers show a loading icon in the place of the favicon whenever the page is loading (or, at least, Google Chrome does). Is it be possible to know when the browser loading icon is active and display a page loading icon concurrently?
If not, any alternate solution would be much appreciated.
Buffering
Case your PHP scripts are causing a slow load you must put' em in buffer. So, when the load is finished you can free this buffer.
This isn't so hard to implement.
See the PHP output buffering control documentation for this:
PHP Output Buffering Control
Finished the loading of the buffer
You can make like this:
http://jsfiddle.net/S9uR9/
$(window).load(function () {
//hideLoading();
});
hideLoading = function() {
$('.loading').fadeOut(2000, function() {
$(".content").fadeIn(1000);
});
};
hideLoading();
In your page, try to remove the commented line in $(window).load() function and comment the last line hideLoading();.
Detecting browser’s activity
I've noticed that some browsers show a loading icon in the place of the favicon whenever the page is loading (or, at least, Google Chrome does). Is it be possible to know when the browser loading icon is active and display a page loading icon concurrently?
You can try another alternative. You can detect the network activity. This is more complex to implement, however more interesting, principally if you want a mobile approach.
See this article, can help.
I need to create a website with an audio player that plays as users traverse through the site. At the same time, the content section needs to fade out and back in while this is still going on. So bring in another piece of HTML without reloading the page. The question I have is, how can i get all those to run correctly, while at the same time, running different Jquery plugins on different pages?
Essentially, I need to website to run like this one but with a continuous audio player in the corner or something.
http://www.chalicerecording.com/
If you notice, the page never reloads and the name of the actual file doesnt display on the browser top. This gives me the idea thats its using PHP for the page.
So with that idea, I ended up finding this.
http://www.youtube.com/watch?v=ytKc0QsVRY4
The problem im having with that is that I cant seem to figure out a way to run individual Jquery plugins on each individual PHP page without reloading the entire page. I hope this is enough info for you guys to work with.
you will need to use ajax calls to do so
jQuery.ajax
jQuery.post
jQuery.get
you also need to use jQuery fadeIn , jQuery fadeOut
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.