Using following code to show loading animation (and hide whole page loading process with it) if js enabled
<script>
document.getElementsByTagName('body')[0].innerHTML = '<div id="loading"><img src="core/design/img/load/load.gif" /></div>';
</script>
And fading out with following code
$(window).load(function(){
$('#loading').fadeOut(600);
});
But the loading div appears only after big delay:when whole page loaded it appears for 1-2 seconds. How -to fix hat problem? The loading div must appear at first
here is the page that i'm talking about http://aquastyle.az/?lang=en
try to change
<script>
document.getElementsByTagName('body')[0].innerHTML = '<div id="loading"><img src="core/design/img/load/load.gif" /></div>';
</script>
to
<script>
$(function(){
$(document.body).html('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
});
</script>
and see if that doesn't work better for you.
Try one thing
Make that loader div visible at start
style="display:block;"
and after page load make it disappear
$(document).load(function(){ $("#loaderdiv").css("display","none") })
Related
I use a custom CSS preloader which is loaded by following jQuery snippet.
The problem is that it loads together with javascript, so it takes a while. The result is, that for a first 2-3 seconds there is nothing on my page - no content and no preloader.
I tried to move my preloader script up in the project to loads it at first, but it doesn't help a lot.
How to make it to load immediately and without a lag?
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function () { // makes sure the whole site is loaded
$('#status').load("preloader/preloader.html"); // will first fade out the loading animation
$('#preloader').delay(2500).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(2500).css({
'overflow': 'visible'
});
})
//]]>
</script>
preloader.html is a html code of my css preloader.
The reason your lag takes so long is because you are waiting for the whole site to be loaded. This is usually taken up by images, so replacing the $(window).load with $(document).ready will probably make it faster. Also notice your delay of 2500ms (2.5s), reducing that will make it load faster too.
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() { // makes sure the whole site is loaded
$('#status').load("preloader/preloader.html", function() {
//run after ajax get request completes (preloader.html is loaded)
//now we remove the delays since we have explicity waited for the preloader to load
$('#preloader').fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').css({
'overflow': 'visible'
});
});
});
//]]>
</script>
I have a div that has a background video whos size is roughly 6mb. I want to show the entire page until that video finishes loading.
I've seen in plenty websites, specially the ones of movies (recent ones) they have background video, and before they show the page, there's like a loading screen.
How can I achieve this? I've been searching around but so far, no luck. Is there a specific name for this technique if you can call it like that?
You can use jquery to achieve this like follows:
$(window).load(function() {
$('PUT_ID_OF_VIDEO_CONTAINER_HERE').hide();
});
I would suggest using the callback on jQuery load() like this >>>
<div id=videoHolder></div>
<div id=loadrHolder></div>
<script>
$( document ).ready(function() {
$('#videoHolder').hide();
$('#videoHolder').load( "myVideo.mp4", function() {
$('#videoHolder').show();
$('#loadrHolder').hide();
});
});
</script
If you are using a library like jquery.videoBG (http://syddev.com/jquery.videoBG/) to show the video, I think you could modify the code to show your page when the video has been loaded.
HTML:
<body>
<div id="dvLoading">Loading...</div>
<div id="dvContent" style="display:none"></div>
</body>
Javascript in library:
$video.bind('canplaythrough',function() {
$('#dvLoading').hide();
$('#dvContent').show();
});
You can find a listing of the events for the video element here: http://www.w3schools.com/tags/ref_av_dom.asp
I would like when my page is refreshed automatically every 15 seconds, everything to be loaded once. I tried this code but it doesn't work.For example when an image is large,I do not want to see the image loading slowly,I want the page to be completely loaded(images, tables) in the background,and then to see all the changes once.Any ideas ? I tried this code but it does not work as I expected.
<script>
function autoRefresh1()
{
window.setTimeout(function(){ document.location.reload(true); }, 15000);
}
</script>
<body onLoad="autoRefresh1();">
After following the links in the comments I came to solution that solves my problem
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(
function() {
setInterval(function() {
$('#table').load("table.html");
}, 15000);
});
</script>
And the div inside the :
<div id="table" align="center"></div>
You can check to see if the page is fully loaded with the Document.readyState.
There are probably many ways to go about doing this, but I would have a CSS box overlay the entire page with a "loading" message. While the loading message is up, I would use a setInterval() to check the document.readyState. When the readystate returns complete, I would clear the initial setInterval(), hide the loading message, which would then reveal the rest of the page.
I Have a huge php table and i want Load it via AJAX to insert a loading gif to the user.
So i'm very noob with this kind of operation and i make a very simple code to do this task.
Here is my code:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
$("#tableDiv").load("regulatoryData.php");
});
This is loading the gif but it is not running, it remains static.
How can i correct it?
Any suggestions?
EDIT: When i drag my image to the browser it animates normally.
EDIT 2: Whit just the
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
The gif works fine but when i add the second part its starts to run and just after it stops and remain freezed until the regulatoryData appears
EDIT 3: Actually i checked that is not the gif that is freezing but the entire browser.
Sorry about my english :/
Add at the beginning of <BODY>
<img src="images/loader.gif" style="display:none" />
As a "pre-loader"
I've found that IE stops animating GIFs when you start loading another page. I've solved that in one of my own projects by adding a timeout that refreshes the image source 50 ms after the other page starts loading by just assigning it the same value again. In your case that would look something like this:
$(document).ready(function() {
$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');
setTimeout(function() { $("#tableDiv img").attr("src", "images/loader.gif"); }, 50);
$("#tableDiv").load("regulatoryData.php");
});
I would recommend something like the following:
http://jsfiddle.net/NeFaz/1/
Load
<div id="myid">
</div>
$(document).ready(function() {
$("#load").click(function() {
$('#myid').addClass('loading');
$("#myid").load('http://www.confetti.co.uk/shop/', function () {
$('#myid').removeClass('loading');
});
});
});
#myid {
height: 500px;
width: 500px;
}
#myid.loading {
background-image: url('http://koikoikoi.com/wp-content/uploads/2012/07/RESET.gif');
}
This sets the image as a background of the div, but only when a class is applied. We start without this class.
Upon click the load link, we add the loading class to the div and the bg image will display. The function that is used on load fires upon the load finishing, and removes the class from the div therefore removing the image.
I know this has been asked and answered many times in this forum. But it does not work in what I am looking for.
I want to display a loading indicator while the ajax div is loading. There are cases when it takes a few minutes to load so it would be good to let the user know that the is loading.
From what I gathered it can be done in jquery. I am not too familiar with jquery yet. With this code the loading works but only for the first page.
$(document).ready(function() {
$('body').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
$(document).ajaxStart(function(){
$('#ajaxBusy').show();
}).ajaxStop(function(){
$('#ajaxBusy').hide();
});
My page is structured like this
Header Page
-Div (display ajax here)
-Another div within the first loaded page(Load another page through ajax here)
I need it to display the loading indicator in the second div while it's loading. I am assuming that jquery "body" appends it to the main page body once and doesn't run again as it's within the same page. I did try to create a div and instead of body, load the div in jquery but it doesn't work.
Any help will be greatly appreciated.
I found that the easiest way to add the loader gif to specific elements is to create a CSS class with the loader as a background instead of appending an actual image:
.ajax-loader {
background: url(ajax-loader.gif) center center no-repeat;
}
Then you just add that class to the element you are loading and remove it when it is done:
// Removes any loaded images on Ajax success
var removeLoader = function(event, XMLHttpRequest, ajaxOptions)
{
$('.ajax-loader').removeClass('ajax-loader');
};
// Add the ajax loader to a specific element and remove it when successful
$('.div1').addClass('ajax-loader').load('mypage.html', removeLoader);
considering that the div you want to load your image has an id="theDiv"
$(document).ready(function() {
$('#theDiv').append('<div id="ajaxBusy"><p><img src="ajax-loader.gif"></p></div>');
});
Is there a reason you're appending your "ajaxBusy" div via Javascript? Why not just include the HTML on the page itself?
<div id="main">
<div id="ajaxBusy">
<p><img src="ajax-loader.gif"></p>
</div>
</div>
Try binding the ajaxStart and ajaxStop to the ajaxBusy div instead of the document.
$('#ajaxBusy').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});