Using the plugin pace.js (http://github.hubspot.com/pace/), I wish only to use it to preload the first page of a site. Been looking through the options but there doesn't seem to be a built-in way to do this, but only toggling pushstate and ajax preloads.
Also, for some reason the preloader bar ends about 50% of its width when preloading a page. This probably has to do with the site being run locally, although I use multiple external elements and images. Anyone else experiencing this?
here is my way of doing it. you may put in how you implemented that.
<script> $(window).load(function(e){ $('div.loading-page').fadeOut('slow'); }); </script>
<div class="loading-page"></div>
css:
.loading-page{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
background:white;
z-index:1999; /* as pace has 2000 */
}
If for some reason you wanted to do this with pace.js, you can take advantage of classes and just add a class to the body element after the page has been completely loaded.
$(window).load(function() {
setTimeout(function() {
$('body').addClass('loaded');
}, 1000);
});
Then you can just hide pace with CSS if its inside body.loaded
body.loaded .pace {
display: none;
}
Of course, it doesn't really make sense to use pace for this if you only want to show it once, but using this technique you can easily have different styles and/or animations for initial VS. secondary loading
Related
For my mobile website I have two full screen divs, e.g.:
<div id="splash-page"> ... </div>
<div id="content"> ... </div>
I have set up the z-indexs so that #splash-page is on top of #content. This is because I would like it so that #content is not visible until I call $("#splash-page").hide().
Here's my CSS:
#landing {
z-index: 9999;
}
However, when this page loads on a slow connection, sometimes #content is visible and then #splash-page covers it.
What is the best way to achieve the desired effect without doing an AJAX load or something else complicated with #content?
What about just hiding #content initially, instead of doing it through z-index?
Then you can call $("#spalsh-page").hide(); and $("#content").show(); in tandem.
I would put a display:none; style on #content initially
use css and set display to none by default:
#content
{
display:none;
}
I have a client who asked to temporarily hide all images on a webpage, but without creating a 404 (leaving them visible to bots).
My try was this:
jQuery(document).ready(function() {
jQuery("img").attr({src: "/my/path/myfile.png"});
});
The problem is that on a slow connection, images are loading, and only on $(document).ready() are hiding (of course - that is what I asked in the code :-) - I do not know a different method …)
How can I make it so that all the images will be "hidden" on browser side, while loading, in a progressive way?
Why don't you simply hide them using CSS:
img {
visibility: hidden;
}
This way all images are linked correctly, your content flow is intact (in contrary of using display: none;), you don't need any JavaScript and the users won't see them.
Demo
Try before buy
There is two ways that I know to do this.
img {
background: url('loading.gif') no-repeat;
}
and
<script>
$('#loadImg').show();
$('#BaseImage').load(function(){$('#loadImg').hide();});
</script>
You assign load event to the image which fires when image has finished loading but background image to all images using css will be easier. Take note that This doesn't work very well with transparent images.
I have a webpage which heavily makes use of jQuery.
My goal is to only show the page when everything is ready.
With that I want to avoid showing the annoying page rendering to the user.
I tried this so far (#body_holder is a wrapper inside body):
$(function(){
$('#body_holder').hide();
});
$(window).load(function() {
$("#body_holder").show();
});
This works completely fine, but messes up the layout.
The problem is that hiding the wrapper interferes with the other jQuery functions and plugins used (eg layout-plugin).
So I guess there must be another trick to do this. Maybe lay a picture or div over the body until window.load has occurred?
What approaches do you use?
EDIT:
The solution most likely has to be another way than display:none or hide();
Anything done with jQuery will normally have to wait for document.ready, which is too late IMHO.
Put a div on top, like so:
<div id="cover"></div>
set some styles:
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;}
and hide it with JS when all elements are loaded:
$(window).on('load', function() {
$("#cover").hide();
});
Or if for some reason your script uses even longer time then the DOM elements to load, set an interval to check the type of some function that loads the slowest, and remove the cover when all functions are defined!
$(window).on('load', function() {
$("#cover").fadeOut(200);
});
//stackoverflow does not fire the window onload properly, substituted with fake load
function newW()
{
$(window).load();
}
setTimeout(newW, 1000);
#cover {position: fixed; height: 100%; width: 100%; top:0; left: 0; background: #000; z-index:9999;
font-size: 60px; text-align: center; padding-top: 200px; color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>This</li>
<li>is</li>
<li>a</li>
<li>simple</li>
<li>test</li>
<li>of</li>
<li>a</li>
<li>cover</li>
</ul>
<div id="cover">LOADING</div>
Here is a jQuery solution for those looking:
Hide the body with css then show it after the page is loaded:
CSS:
html { visibility:hidden; }
JavaScript
$(document).ready(function() {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
The page will go from blank to showing all content when the page is loaded, no flash of content, no watching images load etc.
You should try setting visibility to hidden instead of display:none. Setting visibility to hidden will retain all elements positions and dimensions, thus it shouldn't create layout problems.
Start your HTML with:
<body style="opacity:0;">
At the end of your script:
document.body.style.opacity = 1;
Stumbled upon this and tried #9ete's solution but it didn't help me.
This worked instead:
CSS:
html { visibility:hidden; }
JS:
window.addEventListener('load', function () {
document.getElementsByTagName("html")[0].style.visibility = "visible";
});
As per documentation for window, the load event is fired after all the content (images included) is loaded while $document says that ready is fired after only the DOM is ready.
Your question is valid, but I would not get in a practice of hiding or covering the page while things are spinning up.
It keeps the user from understanding what's happening on the page. While lots of things may need to load, different parts of the page should spring to life as they're loaded. You should get in the practice of locking controls that are not ready, perhaps displaying a spinner or some other progress indicator over them. Or setting the cursor to wait on loading items.
This keeps the user in the loop and allows him to see and interact with parts as they come online instead of obscuring all parts until everything is ready.
You will normally want to load the things the user needs the quickest access to, usually stuff above the fold, first. Loading is a prioritization that can easily be coordinated with Promises.
At the very least seeing the page allows the user to get his bearings and decide what to do. Be transparent.
I was seeking a non-javascript solution so I found one that is working on most browsers in acceptable manner.
Since the loading order of CSS rules matters;
Define the hiding class in the first CSS file or inline in head.
.hidden-onpage-load{ display: none; }
In the body, the class can be used as
<div class="hidden-onpage-load"> ... </div>
Redefine it inline or in a CSS file after all other CSS and JS files are loaded
.hidden-onpage-load{ display: block; }
The simplest solution I've come up with is to wrap the body in a as suggested previously, but set it as hidden from the get go, then use JQuery (or javascript) to unhide on load after all components are loaded.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bodyDiv" hidden>
Hello World!
</div>
<script>
$(document).ready(function() {
// add JQuery widget loads here
$("#bodyDiv").show(); // reveal complete page
})
</script>
Don't forget, a lot of frameworks use javascript to structure a page. To prevent the page from showing before these modification have been made you'll need to do something like what is described here (e.g. run a script at the end of the page to show the real contents of the page):
Detect if any JavaScript function is running
If you have a div #bodyholder then you can put display:none in your CSS for it and then with jQuery do:
$(document).ready(function() {
$('#body_holder').show();
});
I don't see why hiding a div should interfere with the loading of anything, because all it means is it is hidden. However, if you have lots of jQuery being used then make sure you wrap it in $(document).ready which will make sure that the DOM is fully loaded before the Javascript is executed
A further point is that HTML/CSS is designed for progressive loading, and if you do it properly then you can get a nice progressive loading of content for your users. I personally wouldn't want my users getting a white screen for a few seconds until everything was loaded. Move your Javascript to the end of the page so that it doesn't block loading and get content onto the screen as quickly as possible.
I am trying to get a smooth transition when I redirect users. First by fading out the page then redirecting and and fadeIn.
Here is my redirect
if ( data.redirect != undefined )
{
$("#toppanel").slideUp(1000);
$("#content").fadeOut(2000, function() {
window.location = data.redirect;
});
My next page has a javascript in the header like this:
jQuery(function ($) {
$("div.container_16").first().hide();
$(".grid_16").first().hide();
$("div.container_16").first().fadeIn(2000);
$(".grid_16").first().slideDown(4000);
This almost work except for a few milli sec where the second page loads then turns blank and fades in. How do I fix this? Do I need to change the css or html?
A simple fix to this would be:
CSS
body{
display:none;
}
JS
jQuery(function ($) {
$('body').show();
$("div.container_16").first().hide();
$(".grid_16").first().hide();
$("div.container_16").first().fadeIn(2000);
$(".grid_16").first().slideDown(4000);
}
You should know that 1 second is a lot of time for a web user. And basically taking 6s extra to just move to another page could be very costly to your user base. I hope you offer a solution without these kind of effects.
UPDATE
CSS
/*
* overflow => so you don't get a scrollbar
* visiblity => so all content is hidden
* background => so you get a black background
*/
.bodyExtra{
overflow:hidden;
visibility:none;
background:#000;
}
JS
jQuery(function ($) {
$(document).ready(function(){
$("div.container_16").first().hide();
$(".grid_16").first().hide();
$('body').removeClass('bodyExtra');
$("div.container_16").first().fadeIn(2000);
$(".grid_16").first().slideDown(4000);
});
}
The logic behind this is to make your page work as a buffer zone. You then hide the elements you want to fade in, remove the class from body and fade everything in.
UPDATE 2013.09.01
I see this answer is still generating some traffic and I have to admit, since the initial answer in 2011, I have an addition to make
HTML/CSS
<noscript>
<style type="text/css">
.bodyExtra{
overflow:auto !important;
visibility:visibile !important;
}
</style>
</noscript>
This can also be done with a <link rel="stylesheet" type="text/css" href="no-js.css" /> tag.
The idea behind this is to fix the disabled javascript issue described by theazureshadow in the comments.
You're getting what is called a "flash of unstyled content" or FUC. You could wrap your second page in a container and hide that via css (display: none;) and then fade in when it's loaded.
Don't use pure css to hide the content originally. If you do, users with JavaScript turned off will not see your content. Instead, only hide when javascript is available.
.js-enabled div.container_16,
.js-enabled .grid_16 {
display: none;
}
Include this line of javascript at the very top of the body:
$(document.body).addClass('js-enabled');
Then in your animation function, after you've hidden .grid_16, include this line to return things to normal:
$(document.body).removeClass('js-enabled');
If you want, you can be more specific and target the hiding styles to the particular elements you want to hide. But I don't know if that's practical for your case -- too few details.
Let's say if I have wrapper div which includes some links and images,
is there any way I can deactivate it at once with CSS only?
After review of answers:
I dropped the idea that can make it with CSS only.
jQuery blockUI plug in works like charm.
There is a CSS rule for that, but it's not widely used because of old browsers support
pointer-events: none;
These days you can just position a pseudo-element over the content.
.blocked
{
position:relative;
}
.blocked:after
{
content: '';
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
z-index:1;
background: transparent;
}
http://jsfiddle.net/HE5wR/27/
I think this one works too:
CSS
pointer-events: none;
if you are going to use jQuery, you can easily accomplish this with the blockUI plugin. ...or to answer your question with CSS, you'll have to absolutely position the div over the content you wish to block. just make sure the absolutely positioned div comes after the content to be blocked for z-indexing purposes.
<div style="position:relative;width: 200px;height: 200px;background-color:green">
<div>
Content to be blocked.
</div>
<div style="position: absolute;top:0;left:0;width: 200px;height:200px;background-color: blue;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>
</div>
sorry for all the inline css. you'll have to make some nice classes. Also, this has only been tested in firefox and IE7.
Cover it up with another un-clickable element. You may need to use JavaScript to toggle this "cover" on and off. You can do something clever like make it semi-transparent or something as well.
<style>
#cover {position:absolute;background-color:#000;opacity:0.4;}
</style>
<div id="clickable-stuff">
...
</div>
<div id="cover">
</div>
<script type="text/javascript">
function coverUp() {
var cover = document.getElementById('cover');
var areaToCover = document.getElementById('clickable-stuff');
cover.style.display = 'block';
cover.style.width = //get areaToCover's width
cover.style.height = //get areaToCover's height
cover.style.left = //get areaToCover's absolute left position
cover.style.top = //get areaToCover's absolute top position
}
/*
Check out jQuery or another library which makes
it quick and easy to get things like absolute position
of an element
*/
</script>
You should consider to apply the event.preventDefault function of jQuery.
Here you can find an example:
http://api.jquery.com/event.preventDefault/
TL;DR-version:
$("#element-to-block").click( function(event) {
event.preventDefault();
}
BAM!
If you mean unclickable so that the users can't copy and paste it or save the data somehow. No this has never really been possible.
You can use the jQuery BlockUI plugin or the CSS rule pointer-events: none; but that doesn't really prevent people from copying your text or images.
At worst I can always wget your content, and at best both css and js methods are easily circumvented using plugins like:
"Allow right click" on firefox or chrome
"Absolute enable right click and copy" on firefox or chrome
"Don't fuck with paste" on firefox or chrome
Further to the point, unless you have a really good and legitimate excuse for breaking basic browser behavior, usability, accessibility, translation functionality, password managers, screenshot tools, container tools, or any number of various browser plugins functionality in the users right click context menu, please, just, stop, doing, this.