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.
Related
I have developed a comment system with ajax and its working fine. I want to add a ajax/js code to refresh my time ago div after every 5 seconds so that the time changes while one is on same post.
Please note:
Sir, i just want code to request server to refresh div after a specific time period. I do not want to load page or div but i want contents within that div should be refreshed after a specific period of time.
I'm new in js/ajax and Ii tried this but not working yet
$(document).ready(function () {
setInterval(function () {
$("#showtimeago!").load();
}, 1000);
});
Result I want is:
<div class="p_timeAgo" id="showtimeago"> <?php time_stamp($timePost);?></div>
Can anyone help me to solve that issue?
I don't know what UI you are using, here is for the php(since Jquery is same) you can tune this up for your requirement.
function loadlink(){
$('#showtimeago').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Try this:
<div id="showtimeago"></div>
setInterval(function(){
$('#showtimeago').load('test.php');
},5000);
test.php is the page the refresher stand.
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 this JQuery code that loads a php file into a div every X Seconds
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('dashboard.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>
<div class="container"><h3>Loading Dashboard...</h3></div>
when the loading starts it shows the Loading Dashboard text but then every X seconds it just refreshes the content in the background. how can i show some sort of loading image each time it refreshes?
How about this:
1) at the very top of your setInterval function, before you execute the load, set the background of that container class to be a loading image (or however you want to display it).
2) use the callback function of .load (https://api.jquery.com/load/) to remove that loading image when the load has completed.
Here's a fiddle illustrating the direction you should take...
http://jsfiddle.net/j5sZc/
HTML
<div class="wrapper">
<h3 class="loader">Loading Dashboard...</h3>
<div class="container"></div>
</div>
JS
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
var $loader = $(".loader"), // cache references to loader and container
$container = $(".container");
setInterval(function() {
$loader.show(); // show loader when request is initialized
$container.empty().load('dashboard.php', function(){
$loader.hide(); // hide loader once new content is loaded
});
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
I am currently trying to show a div 2 seconds after the page is loaded. I can successfully do the reverse by hiding the div two seconds after the page loads. The issue is that nothing occurs and the div stays hidden. How can I properly show a div after two seconds of page load? Extra: mean while the two seconds are running show an ajax loading gif and then fade in the div
<script type = "text/javascript">
$(window).load(function() {
setTimeout(function() {
$("#contentPost").show('fadeIn', {}, 500)
}, 2000);
});
</script>
html/css
<style>
.contentPost { display:none;}
</style>
<div class="contentPost">
<h2>Hi there</h2>
</div>
$(document).ready(function() {
$(".contentPost").delay(2000).fadeIn(500);
});
Will work perfectly.
Ive never seen your show method written like that. Try altering it into use the jquery method fadeIn:
<script>
$(function() {
$("#contentPost").delay(2000).fadeIn(500);
});
</script>
The show method does not accept any arguments and won't work as you want it to.
Here's an example:
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#photos').load('photos.php').fadeIn("slow");
}, 5000); // refresh every 10000 milliseconds
</script>
<div id="photos"></div>
The problem is the complexity of the other javascript on the page isn't really ideally for reloading the div from an external page. If it's the only way, I'll backtrack and work that out... I was just wondering if it's possible to refresh the div contents from the page itself?
You can read the whole page, then extract the element you're looking for:
$('#photos').load('YourPage.php#photos');
The server will still send the entire page to the client.
function refreshDiv(){
$('#photos').load('photos.php').fadeIn("slow");
setTimeout("do_again()", 5000)
}
function do_again(){
refreshDiv();
}
That would keep loading your jQuery every 5 seconds (5000ms).