$(window).load(function() {
$('#loading').hide();
$('#container').show();
});
In all my php file, I have above mentioned code for displaying loading icon till the page loads. For example : If I execute index.php, loading icon will be shown till index.php gets fully loaded.If it is redirected to example.php when redirecting, no loading icon is displayed, its fully blank. And if it is redirected fully then loading icon is displayed till that page loads fully.
Expected:
When redirecting to next page, in that meanwhile too I need loading icon to be displayed .
so How to display loading icon between the transition of pages?
The trick is to start the loading icon immediately when the page is unloaded. Then when the new page is loaded, the loading icon must be shown immediately again, only then when the new page is fully loaded the icon can be hidden.
// Show the icon immediatly when the script is called.
$('#loading').show();
// show the icon when the page is unloaded
$(window).on('beforeunload', function(event) {
$('#loading').show();
});
// hide the icon when the page is fully loaded
$(window).on('load', function(event) {
$('#loading').hide();
});
Related
I have a page which contains heavy traffic . It is fetching data from multiple servers and showing in the page . It takes usually 3-4 minutes for the page to complete the loading . Please take a look at some of the partial page data
All i need is a spinning gif or a loader to get over the page so that user can't click any link unless the page gets loaded completely .
I have tried the following code
<script language="JavaScript" type="text/javascript" src="JavaScript/jquery-1.3.2.js"></script>
<script>
hideLoading = function() {
$('.loading').fadeOut(20000, function() {
$(".content").fadeIn(10000);
});
};
hideLoading();
</script>
HTML:
<body>
<div class="loading">Loading...</div>
<div class="content">
The problem is when user reloads the page the browser loader spins but the content in the page doesn't get my loader to get over the content .
It only happens until the DOM gets loaded .
All I want is to get the loader to work as soon as user clicks the reload icon or hits enter or F5 or ctrl+f5 for page reload . Hope i made myself clear.
Place your jquery code in document.ready function and make some delay on that function like following :-
Add this jquery code at bottom of page.
$(document).ready(function(){
hideLoading = function() {
$('.loading').fadeOut(20000, function() {
$(".content").fadeIn(10000);
});
};
setTimeout(function(){
hideLoading();
}, 1000);
});
May be it will help you.
I have some javascript/jQuery that loads a table on the click of a search button and does not do a page load. Usually when I want to show a loading icon, I would dismiss it once the page has loaded... But there is no page load on this. The user could be on the page for 5 minutes before they search and when they click the search button, the loading icon would appear and once the table has loaded their results, it would dismiss...
Can anyone point me in the right direction to achieve this?
Place a Loading text/image in a div.
<div id="loading" style="display: none;">Loading..</div>
Control the appearance of above div With jQuery ajaxStart & ajaxStop methods.
$(document).ajaxStart(function(){
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
});
The above method triggers whenever there is an active AJAX call.
I'm trying to do a loader animation while page loads.
I have an index page that as a link/button to the page that I want to have the loader. When I click the link the page opens and runs the loader, but the loader never go away only when I refresh the page. After this everything works fine, the loader always disappears when I open the page.
Can anyone suggest a solution for this?
Javascript:
<script type="text/javascript">
$(window).load(function() {
$(".preloader").fadeOut("slow");
});
</script>
HTML:
<div class="preloader"></div>
Try the same with document ready:
$(document).ready(function() {
$(".preloader").fadeOut("slow");
});
An assumption here is, your loader is already there in the HTML and is visible by default.
I am using VisualLightBox Gallery on my site on portfolio: http://www.kamenarstvo-kliestik.sk/en/portfolio.htm but when you open e.g. Kitchen portfolio and whatever picture its open directly, not in lightbox. but when you refresh page on Kitchen portfolio or open this link http://www.kamenarstvo-kliestik.sk/en/portfolio/kitchen.htm, images will be opened correctly. Scripts are linkend correctly too.
Here is my portfolio.htm source http://pastebin.com/wNNPw820
and here is my portfolio/kitchen.htm source http://pastebin.com/Eyz086dt
Seems, like the VisualLightBox gets initialized on page load. Your links are AJAX requests, so the DOM content is uploaded once the category data has been loaded. VisualLightBox does not know about the new elements that got loaded, so it does not work on them. You should run the VisualLightBox again, after the category data request has completed:
jQuery(document).ready(function(){ window.Lightbox = new jQuery().visualLightbox({borderSize:10,classNames:'vlightbox1',descSliding:true,enableRightClick:true,enableSlideshow:false,prefix:'vlb1',resizeSpeed:9,slideTime:8,startZoom:true}) });
Or modidy the current vlbdata1.js script to:
// function to load the lightbox
function init_visuallightbox() {
window.Lightbox = new jQuery().visualLightbox({ borderSize:10, classNames:'vlightbox1', descSliding:true, enableRightClick:true, enableSlideshow:false, prefix:'vlb1', resizeSpeed:9, slideTime:8, startZoom:true})
}
// tells browser to load lightbox on page change or load
jQuery(document).on('ready page:change', function() {
init_visuallightbox();
});
// tells browser to load lightbox after all ajax requests
$( document ).ajaxComplete(function( event, xhr, settings ) {
init_visuallightbox();
});
It looks like it works when the images have been preloaded before .
Try pre-load then using a plugin js.
So I have this button that when clicked on will send you to the next slide (void(0)). The next slide is an iframe which is loaded only when you click on the button.
Before the iframe is fully loaded, an animated GIF should show up and in turn hide after the content is fully loaded.
In my case, the GIF is never displayed. It's totally blank until the iframe is fully loaded. What is wrong?
Here is the script:
<script type="text/javascript">
function hideLoading() {
document.getElementById('loading').style.display = "none";
document.getElementById('edtwo').style.display = "block";
}
</script>
The button:
<span id="nextBtn1"><a href="javascript:void(0);"
onClick='document.getElementById("edtwo").src="ed2.html";'></a></span>
And the next slide which includes the GIF and the iframe:
<li><div id="loading"><img src="_img/loading.gif" alt="Loading"/></div>
<iframe id="edtwo" onload="hideLoading()";></iframe></li>
The problem is that your iframe is initially displayed (and moreover, added in the DOM tree). Inspite of its empty src attribute it will load empty page and execute onload event handler. So you will have your indicator hidden as a result of calling hideLoading.
As you can see in this exmaple, onload triggers without clicking on link.
You can remove frame from DOM tree and add it when user clicks "Next" button or change .style.display to empty string (to show it) of gif loader at this time.