Is it possible to preload all page contents (like showing a loading bar / animated gif.. or loading text.. ) until the contents are fully loaded and then displayed to the user/visitor ? If this is possible, can you give me just directions or resources to follow to achieve this. Because I was able to find image preloaders easily, but I am seeking for a preloading technique that will preload all content on the page before being displayed.
There's no need to use Ajax for this. Simply set the page's wrapper div display to none. Then change it to block when the document is loaded.
Your code might look like this, using vanilla javascript:
<script type="text/javascript">
function preloader() {
document.getElementById("preloader").style.display = "none";
document.getElementById("container").style.display = "block";
}
window.onload = preloader;
</script>
<style>
div#wrapper {
display: none;
}
div#preloader {
top: 0; right: 10px;
position:absolute;
z-index:1000;
width: 132px; height: 38px;
background: url(path/to/preloaderBg.png) no-repeat;
cursor: wait;
text-shadow: 0px 1px 0px #fefefe; //webkit
}
</style>
<body>
<div id="preloader">Loading... Please Wait.</div>
<div id="wrapper">
<!-- page contents goes here -->
</div>
</body>
Update, in jQuery:
<script type="text/javascript">
// Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
$(document).ready(function(){
$("#preloader").hide();
$("#container").show();
});
</script>
Related documents: Events/ready, Events/load, CSS/css & Core/$
If you choose a method where the content is hidden until the whole page is loaded, don't have it initially hidden in CSS then unhidden in JavaScript. If you do that, anyone with JavaScript disabled or unavailable will get no page at all. Instead, do both the hiding and the showing from script.
<body>
<script type="text/javascript">
document.body.style.visibility= 'hidden';
window.onload= function() { document.body.style.visibility= 'visible'; };
</script>
Also note that the term ‘preloader’ isn't really right for what you're doing here. ‘pre’ implies that you're increasing performance by having the page fetched and cached so that it's ready to go by the time it's needed.
But actually this is the opposite: it decreases performance by waiting around showing the user nothing whilst the page is loading, when partial content is available. Defeating progressive rendering makes browsing slower, not faster. It is usually distinctly the Wrong Thing, and except in a few niche cases going with the normal browser progressive rendering is best. This is how the web works; people are used to it by now.
(People, that is, except for the kind of dim-witted management types who don't really use or understand the web but demand that their company's site appears all at once.)
Best way
function ajax(){
$('#wapal').html('path to image');
$.ajax({
url:'somfile.php',
method:'get',
success:function(data){
if(data =='') return;
$('#wapal').html(data);
}
});
}
I did something where I needed to know when an image was fully loaded, so I did the preloading with $.get() function and passed a callback function as the last parameter. This way, when the image was actually downloaded, my callback would fire and I would know that the browser already had the image in cache.
You can write a function that will increment a global variable for each image you tell it to preload, and then your callback can decrement the counter. When the counter is back to zero, call another function. This function now will fire once all images are preloaded.
This is for the images. Everything else can be guaranteed to be loaded when $(document).ready() is fired. So, if you begin your routine at this point, everything on the page should be loaded.
You can do it with jquery easily.
SCRIPT
$(window).load(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
Some modifications to DMus -Jerad Answer as it does't work when adsense is on the page.
You can do it with jquery easily.
SCRIPT
$(document).ready(function() {
$('#preloader').fadeOut('slow', function() { $(this).remove(); });
});
STYLES
div#preloader {
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
background: #c6d6c2 url(ajax-loader.gif) no-repeat center center;
}
HTML
div id="preloader"
Related
I have a site that where some pages run a number of php routines that can sometimes take some time. For example, from one page there is a form:
<form action ="showdata.php">
<input type="submit">
</form>
Assume that the target page is:
connecting to a MySQL database
performing a series of select queries to establish the data to display
preparing the resulting page with data displayed.
I have tried putting a loading gif on the target page but it only loads briefly once I suspect the queries have completed. To do this I have the following on the target page:
CSS
.loader {
top: 50%;
left: 50%;
width:6em;
height:6em;
margin-top: -3em;
margin-left: -3em;
border: 0px solid #ccc;
background-color: #f3f3f3;
position:fixed;
background: url('../images/page-loader.gif') no-repeat;
}
SCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
})
</script>
HTML
<div class="loader"></div>
How can I get the loading gif to be displayed correctly? IE as soon as the page is chosen. I seem to remember reading that you can get around this problem using an intervening page that displays the gif and then redirects to the target page. Is this the good way to solve this problem or is there a better way?
What you're going to want to do is add a loading gif to your page with the form and show it when the button is clicked. The target page will only load as soon as the server-side php stuff has been handled, so showing a loading bar as soon as you click will probably give the result you are looking for.
For example:
<script type="text/javascript">
$('.submit').on('click', function() {
$(".loader").fadeIn("slow");
})
</script>
Cannot find any answers on this particular scenario.
CMS: Joomla
I am use jquery on page that will be iframed to suppress the logo, menu items, etc that are contained in the central index.php header class.
the following code on the page to be iframed works okayish, but flickers (common problem right):
jQuery(function() {
jQuery('.help').remove();
jQuery('.dropdown').remove();
jQuery("header").css("height", " 0px");
jQuery("header").css("width", "0px");
jQuery(":header").css({
width: "0px",
height: "0px"
});
I have seen some solutions around document.write, which may work, however please note i cannot change the html in the index.php file, i have to find some way of only changing during or before page load (for the page load iframe)
any help greatly appreciated!
Here is sample of the page that will be used for iframing (sometimes the classes do not load, i think this is due to the flickering/jolting of when the jquery kicks in : link
If you can change the CSS code of your document, add the following style properties to it:
.help,
.dropdown {
display: none;
}
header,
:header {
height: 0px;
width: 0px;
}
If you cannot change the CSS of your page, use the following snippet to handle your problem (the files need to be included in the head, before the elements are loaded):
<head>
<script type="text/javascript" src="jquery.js"></script">
<script type="text/javascript" src="file.js"></script>
</head>
file.js (not within $(document).ready()):
$('<style type="text/css">.help, .dropdown { display: none; } header, :header { height: 0px; width: 0px; }</style>').appendTo('head');
I am stacked at one issue that drives me crazy. I made a left floating file tree view and I include my website. But When I include my web site my file treeview, My treeview does not be clickable[at chrome] also, int IE 9 my thumbnail part for viewing pdf document doesn not opened. Chrome is most important than my other my troubles.
Let me give me codes
item id is my left menu.
<div id="item" style="float:left">
<?php include("leftmenu.php"); ?>
</div>
sample include method.
also sidebarOpenfile is file treeview show button.
<script type="text/javascript">
$(document).ready(function(){
$('#sidebarOpenfile').click(function()
{
if ($('#item').css("height")=='0px')
{
$('#item').animate({height:"700px"});
}
else
{
$('#item').animate({height:"0px"});
}
});
});
Above 2 codes is in my main page (.php file).
Also my main page php file's css (#item part):
#item {
position:relative;
margin-left:0px;
float:left;
top: 10px;
width: 200px;
height:0px;
bottom: 0px;
background-color: hsla(0,0%,0%,.1);
overflow:auto;
display:inline-block;
}
Finally my leftmenu.php files codes
$(document).ready( function() {
$('#leftmenu').fileTree({ root: '../', script: 'fileview/connectors/jqueryFileTree.php', folderEvent: 'click', expandSpeed: 750, collapseSpeed: 750, multiFolder: false }, function(file) {
alert(file);
});
});
Thats all. And All file that is includes is valid and its working. My problem is
Thanks for helping..
Terrible Mistake :)
I cant believe how I can miss.
You're right putvande.
All I need only changing z-index property.
If anyone who have similar problem, they can solving with adding z-index property to their css file.
I am building a wordpress site using jQuery with cycle plugin to cycle through some posts.
I have an image used as a full background, with this css:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
I have inserted the first image attachment url into the img.bg with a javascript from the loop. However, this understandably only works once, at page load.
This is the javascript:
$(function () {
$('.bg').attr('src', '<?php get_image_url(); ?>');
});
What I need, I guess is to fire off the script with each iteration of the cycle script, because the source shows that the get_image_url() function supplies the script with the unique url in each article div.
In the end, I even want some navigation buttons to move back and forth, switching the posts and the background simultanuously.
Any suggestions?
You can either use the cycle's next iteration function or using setInterval.
function changeImg()
{
$('.bg').attr('src', '<?php get_image_url(); ?>');
}
setInterval("changeImg()", 1000);
Hope this helps. But still, you would get output only once, when you execute the get_image_url();.
As for now, I use $(".bg").prependTo(document.body); to get the background images out of the article div, and then starting the cycle. This works, although some more problems might mount on the way.
I'm having following problem: my PHP page generates navigation menus from db like <ul> menus then with the help of JS shows it like multi-level menu. The problem is, it shows whole loading process. At first user sees something like that:
Then
How to hide whole loading process of page, or is there any other solution for this issue?
hide it in css,
#loading {
display: block;
background: url(loading.gif) no-repeat center center;
}
#container {
display: none;
}
and, in javascript show it again (this code uses jquery)
$(function(){
$('#loading').fadeOut(250, function(){
$('#container').show();
});
});
of course you can do this like anyhow you want, hide and show anything in css,
then on document ready, switch it over to the content. by hiding the loading div, and showing the content.
Set the style on display:none; until your page is completely loaded.
Generally this is done by showing/hiding a div or two over the top of your content. You can get a fancy loading gif from http://www.ajaxload.info/ to get you started. Then you'll want to place a DIV on your page:
<div id="loading">
<p><img src="loading.gif" /> Please Wait</p>
</div>
You'll want this hidden by default, so you'd need to add this CSS:
#loading { display:none; }
You'd also want to setup the display for this too:
#loading { display:none; position:fixed; left:0; top:0; width:100%; height:100%;
background-image:url("transparentbg.png"); }
#loading img {position: absolute; left:50%; top:50%}
The file transparentbg.png would be a 25x25 black PNG set to about 80% opaque. Next you would need a way to show and hide this with jQuery:
function showLoading() {
$("#loading").show();
}
function hideLoading() {
$("#loading").hide();
}