在网页加载时向用户显示一条消息

Question

I have ported a mobile web app for android. The app is already running very well and it is located here CancerBank . There are some links that more than 30 seconds to load when a user clicks on them on the android app which can be downloaded here Android App . Now i want to show the user a message that the page is loading until the page is fully loaded. Does anyone have a plugin that i can use to accomplish this?

My page app is developed in javascript, html5 and css.

Answer 1

take a look at this. it seems like a nice plugin.

http://www.gayadesign.com/scripts/queryLoader2/

Answer 2

If you are using jQuery and the page content is loaded by ajax you can use this:

$("body").on({
    ajaxStart: function() { 
        // Your code here
    },
    ajaxStop: function() { 
        // your code here 
    }    
});

If you don't use ajax just add a loading div when a user clicks on a link. When the page is loaded and the user gets the new content this div will be gone again because the page was 'refreshed'. And if you really want to let them wait to all content of the new page is loaded: Add a loading div which displays always, than use javascript to hide it.

window.onload = function() {
    // hide your div
}

Answer 3

You could hide all your pages elements by default (eg. <div class='show_this' style='display: none;'>content</div> ) and only show a div containing a "loading" animation. Then you'd show the page elements when the page is loaded. Eg. Put this after you load jQuery:

$(document).ready(function(){
   $('.loading_message').hide();
   $('.show_this').show();
});

Something like that might work.