I want to show preload image while main page is preparing and then loading. I think I can't use Ajax, because I need to reload whole main page. I want to implement next: First, I request the preload page and a server sends me it. Second, the server start to form main page(It takes about 15-20 seconds).
Third, when the server ends his work it send me the main page. But how can I implement 3rd part?
The second idea is separate the main page on 2 parts. One of them is the preload page which contains whole main page's contents without 'busy time' contents. And then use Ajax to load 'busy time' contents.
What do you think, colleagues?
Try this. You'll need a loading spinner element. Also, the $(function(){}); activate when the DOM (html structure) is loaded. That's the closest you'll ever get to when the visitor first reaches the page. The body element is hidden, then waits till all the images and everything all fully rendered and the CSS and Javascript files are loaded and working, then it crossfades from the spinner to the content and removes the spinner.
$(function(){
$('body').hide();
$('html').append('<div id="loading-spinner"></div>');
$('body').load(function(){
$('#loading-spinner').fadeOut('fast').remove();
$(this).fadeIn('fast');
});
});
You'll need some CSS to apply a GIF to the background of the loading spinner element and center it:
#loading-spinner {
width:100px;
height:100px;
background:url(loading.gif);
left:50%;
margin-left:-50px;
top:50%;
margin-top:-50px;
}
Related
I am making a web page where I want to load the contents of a php file in a div tag. Say for example after every 5 seconds refresh the div contents and load a php to update itself on my main page without reloading my main page.
The problem I have is as the timer reloads the div contents my main web page is getting longer and longer vertically and slows the web page.
I am trying to load this way:
scripts used are php, jquery, html
function Load_external_content(){
$('#chatsidebar').empty();
$('#chatsidebar').load('chatcnew.php');
}
setInterval('Load_external_content()', 5000);
<div class="chat-sidebar" id='chatsidebar'>
<?php include("chatcnew.php"); ?>
</div>
The data from my chatcnew.php file is loading properly in my div but the scrolling occurs on my main page and I am not sure whats happening.
try setTimeout instead because load html cost uncertain time.
function Load_external_content(){
$('#chatsidebar').empty();
//you can do optimizing: render chatcnew.php is not necessary if the data of the chatcnew.php not change
$('#chatsidebar').load('chatcnew.php',function(){
setTimeout(Load_external_content,5000);
});
}
Load_external_content();
I'm making a website, and I have a problem. Or more exactly, I don't know how to solve the blank page problem.
I'm making a website, where if you swipe right, some data will be inseret in the database, and then the webpage will refresh. After refresh, a blank page is shown, and then the normal webpage with all it's html.
How can I put a loader image on the blank page before the DOM is ready? I'm using jquery and jquery mobile.
The webpage is this: http://meetmean.comxa.com/KlausApp/home.php . If you swipe to right, or left, it will show you an alert box, and then the page will refresh. I want the blank page that is shown after to be a loading image.
I had kind of the same problem and my solution is:
I covered the (blank one you were talking about) HTML page with a full screen black background and a css animation in the div , and I hide that div when the page is fully loaded using JavaScript
window.onload = function () { $('body').toggleClass('loaded'); };
This function will run when the all the content in your html body is fully loaded.
This code will add a class named loaded to your html body,
in my style.css file the loaded class will hide the full screen div. it was one of the ways to have a loader in your page and it's up to you , there are many ways to do this.
Take an SVG animation file and keep it wherever you want to show it in the page.. Previously keep its display property none ..if you are using (jQuery) AJAX (i.e. $.ajax()) to fetch the data you can use the on complete callback function in the AJAX options to fadeout the SVG when the animation comes.
function ajaxCall(){
$("#svg").fadeIn("slow");
$.ajax({url: "demo_test.txt", complete: function(result){
$("#svg").fadeOut("slow");
}});
}
Here as soon as the function is called the SVG animation appears.. and soon as AJAX gets response the SVG is faded out.
You can get loading animations from http://loading.io
You could use some of loaders from this page: https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html
I have two different pages.
index.html
page2.html
I have a button on index.html which would take us to page2.html,
but its a direct transition. Where as I was looking for a fade in transition to happen when first page switches to second page.
I don't have to come back to first page so we don't need any transition from second to first.
Could anyone please help.
Thank you
There would be three ways to really make this happen. You can't transition from one page to another if the browser is loading the new page in the address bar besides using a fade out and a fade in on the new page. However, there are two other ways to get animation of page loads running. The first of which is completely inadvisable because it uses an iframe and can complicate communication between the frame and the page it's loaded on.
Here are the three algorithms:
Add a fade in animation on the "body" element when the pages first load and make all links on the pages trigger via javascript. When the Javascript navigate function is called, fade the page, and then execute the location change on the animation callback. Since all of the pages have a fadeIn, this would appear that the page is "transitioning".
(inadvisable) - iterate an ID and on each new request, load a hidden iframe above all of the content and give it the incremented ID. also before creating the frame apply an onLoad handler to the frame and make it animate the frame when it's loaded.
Use AJAX to load your content into a container and you can animate it based on when the ajax request starts and gets a response.
I assume you were looking for algorithms, not code samples. Hence the verbiage.
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.
I have a page that takes information from a database. It exports a lot of information, so it takes a few seconds to load. I do have an animation, but it is not behaving how I want it to behave. When a user clicks on a link, I want there to be a loading animation instantly, and it shows until the data on the page actually loads.
Here is what it actually does:
When I click on a link, I wait 5 seconds, then the page loads with the animation, then the data loads. The problem is that I want the animation to run instantly, not wait 5 seconds, then run for half a second, then the data loads.
Here is my current JQuery code:
$(document).ready(function() {
$("#content").hide();
$(window).load(function() {
$("#content").show();
$("#content-loading").hide();
})
})
content is the content that takes a while to load and content-loading has the loading animation.
$(document).ready() will only run when the DOM is done downloading, basically when </html> is downloaded at the end of your page. If your database data is part of the page, it will be loaded by the time the DOM ready event fires. Meanwhile, $(window).load() will fire when all the resources on the page have loaded; all the images, external stylesheets, etc.
Perhaps you could have a stylesheet before the data which hides the content, then an internal stylesheet at the bottom of your page, after the data, which makes the content display and the #content-loading element hidden?
Otherwise, you could load the data asynchronously in some way, with AJAX or in a frame.
http://fgnass.github.io/spin.js/
See this, if you want to add a loading.....
your animation won't run until the whole page is loaded (including all that db stuff). Instead, load a page that has just your animation, and an AJAX call to the db data. Then the db call is asynchronous.