When I use jquery-ui button to make an <input type='checkbox'> element behave like a button, I get a nice looking button, but it flickers when loading the page.
Before the $("#checkbout").button() runs, I see a normal, unstyled checkout, that turns into a styled button a few milliseconds afterwards.
What's the correct way to use Button without this flickering effect?
It's not so much that you're using the button widget incorrectly--you're experiencing a FOUC (Flash Of Unstyled Content). This occurs when your page has lots of elements and JavaScript that runs when the page is ready. You can see the page unstyled for a few seconds because the page takes so long to load.
There are several strategies for avoiding this, but one simple one is to add styles for the button that hide it (using JavaScript) outside of $(document).ready, then remove the styles when the document is ready:
<head>
<script type="text/javascript">
document.write("<style type='text/css'>.button { display: none; }</style>");
$(document).ready(function () {
/* Remove the class hiding the button and call the widget: */
$(".button").removeClass("button").button();
});
</script>
</head>
Example: http://jsfiddle.net/andrewwhitaker/gdbB5/ (uses setTimeout to simulate a page loading)
You could also apply this technique to an entire content element that's experiencing the problem (like a div that contains most of your content that 's heavily modified by JavaScript).
Related
I am using Jquery tabs in my project, and it all works fine.
However when the user opens the page, the page displays all the material in all the tabs for a second first, then it executes the javascript and the screen comes back to normal.
It's an ugly sight, how can I prevent this? Is there a way to show the page after all the loading is done only?
You could try hiding your content when the page loads and using JQuery to reveal it.
HTML:
<div id="contentDiv" style="display: none;">....</div>
JavaScript:
jQuery(document).ready(function ($) {$('#orderContentsInfoBox').css('display','block');});
This jQuery function fires when the document is fully loaded. If you are still seeing a flicker of content before it is hidden in tabs, then I would recommend finding the function that sets up the tabs and inserting the code to reveal the content div there. That way the content will only appear after all tabs are setup.
So I have this as my source code and all is well, apart from when I try to load up the pages with a slow internet connection. What happens is that the current page gets faded out and back in, and after the content from the external html file is loaded it just pops in.
I'm trying to tackle this with just loading everything once the page is loaded initially, how would that work?
Main JS script link - here
I'm posting this as a separate answer as it focuses on your current approach.
Instead of using .load(), use .get() so it isn't replacing the content of your div right away. Then .fadeOut() the div, replace the HTML, and .fadeIn() upon success.
$.get("news.html", function(data) {
$("#content").fadeOut(function() {
$(this).html(data);
}).fadeIn();
});
I was only able to test this with a slow connection simulator (Network Link Conditioner for Mac OS X), but it ran smoothly for my tests.
A better method than my comment suggestion to store in variables would be to render the HTML in hidden divs and display them as needed. That way you're only rendering once.
HTML
<div id="content">
<div class="hidden" id="home"></div>
<div class="hidden" id="news"></div>
<div class="hidden" id="contact-us"></div>
</div>
CSS
.hidden { display: none }
Now use .load() in the background to populate the divs. I'd defer loading until the page is ready for the user so you aren't blocking user interaction. Your menu clicks would then be responsible for adding / removing the .hidden class from each div.
I am aware there are similar questions but the answers are not working for me (example below). First, my (simplified) code.
HTML:
<div id="loading_screen">
<img src="<?= base_url()?>images/loading_screen.png" title="The game is loading, please wait.."/>
</div>
<div id="container">
<!-- a whole lot of HTML content here -->
</div>
CSS:
#container{
display:none;
}
JS:
$(document).ready(function(){
//when document loads, hide loading screen and show game
$('#loading_screen').hide();
$('#container').show();
})
The idea is simple: I initially show the loading screen and hide the container; once everything has loaded, I hide the loading screen and show the container.
But, it doesn't work. The JS code fires off show immediately, as soon as the container div starts loading.
The loading_screen div is only 1 small image (20KB) and the container div is a total of about 400KB.
There are images in the container div, as well as background images on some of its sub-elements. So according to the answers to this question I changed the code to $(window).load(function(). However, that didn't fix the issue.
I suppose I could do the following - not even create the container div at first, and only create it and all its content after the loading div has loaded. But, I'd rather not go down that path, there's server side code in the container, I'd have to add includes etc, and it's not worth it. I'm happy to rely on the fact that the 20KB image will load before the 400KB of content, I just need to get the code to not fire off until after those 400 KB have loaded.
EDIT:
I added this bit of code to the JS (outside the onload function) to see what's happening as the page loads:
setInterval(function(){
var st1 = $('#loading_screen').css("display");
var st2 = $('#container').css("display");
console.log(st1+" "+st2);
},100);
It keeps outputting none block, meaning that the loading_screen is hidden immediately and the container is made visible immediately.
You should take a look at the answer for this question: Detect if page has finished loading
The jquery page for the .load() api explains the following:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
It finishes with this example:
Example: Run a function when the page is fully loaded including graphics.
http://api.jquery.com/load-event/
$(windows).on("load", function() { /// this is deprecated --> $( window ).load(function() {
// Run a function when the page is fully loaded including graphics.
});
The "ready" event fires when the DOM is built, but before other stuff like images may be loaded. If you want a real "load" handler, then do that:
$(window).load(function(){
//when document loads, hide loading screen and show game
$('#loading_screen').hide();
$('#container').show();
})
In a few websites developed by me there is a slide-in/fade-in animations of the content once the page is loaded. I use jQuery for that but before the animation it is necessary the content to be hidden. To achieve that first I have used a css rule #content{display:none} . Then in the page header in a javascript block <script type="text/javascript">
$(function() {
$('#content').css("display","block");
$('#content').stop().css("margin-top","100%").animate({marginTop:'100%'} ,1300).animate({ marginTop:'5'}, 700,"swing", function(){
$('#loading').fadeOut();
...
If I understand well, the jQuery code executes once the page is loaded and it works well this way, but there is one problem. If the user has no javascript support then the page remains blank because of the hidden with a css content. Also google webmaster tools shows a blank page preview probably because they do not execute the javascript(jQuery) code and also the Safari web browser's Top sites page is with a blank page preview because of the same css rule. So in order to have a full support for non javascript browsers I removed the css rule and instead of that I use a javascript code to hide the content <script type="text/javascript">document.getElementById("content").style.display="none"; document.getElementById("loading").style.display="block";</script> only for the users that has a javascript support but this way if the internet connection is too slow first the content is loading like in a normal page, and once it is loaded then the browsers hides it and the animation is executed. This is annoying because this way the animation is bothering the user experience instead of improving it. You start reading the page and suddenly the page disappears and slide in... You can see the result here - http://sky-camp.com/en/paragliding-courses.html
What do I miss? I use javascript for content hiding instead of jQuery in order to try to hide the content before the jQuery plugin is loaded, but It does not work the way I expect.. Any help will be appreciated
Try doing something in the head like:
<script>document.write('<style>#content{display:none;}</style>');</script>
I haven't don't that in a long time, but I used to use it often.
<code>
$( function(){$('#content').css("display","none"); });
</code>
when your page charge completly:
<code>
$(window).load(function() {
$( function(){$('#content').css("display","block");
});
</code>
This is just my opinion...
But I don't really ever prepare for people disabling javascript. As somebody already said, who still does that? If they did there web experience would be awful. Why don't you just add a noscript tag that bypasses that whole function and just shows the content. So if anybody ever does visit the site without JS they just see the page normally.
I feel all the suggestions people have been posting are horribly gross and not at all good practice.
If you have a look at Apple's Mac page on their website. http://www.apple.com/mac/
Their "body" displays an image in the center while the page is loading. After the page is fully loaded, their content fades in. If you use Chrome or Safari and open the Element Inspector, you'll see their body gets the class="loaded revealed" when the page is loaded. And that triggers the content to fade in. If you remove the classes, the content will fade out.
I'm looking for something similar to this for my website. I don't want the whole entire content to not display, I still want to display the header and footer. So basically I want the div#content_area to slide down on document ready... The only problem is, they don't use any kind of display:none; for their body. They're a bit more careful about that, because if the JS file fails, the content will still display.
How can I make this? They way they do it must be lightweight because anybody can write something like
$(document).ready(function() {
$('div#content_area').attr(class, loaded revealed);
});
All I need to do is add the .slide() function and hide the content until the page loads.
Setup your DIV of content right where you want it... setup the image you want to be a placeholder right over the top (with absolute if possible/necessary).
In CSS use the z-index property to keep the image above the other.
What you do then is make the IMG a display:none; property, and then as they page is loading you can turn it on with jQuery... so with JS the placeholder shows and sits above... without JS, the image placeholder is invisible, and the user simply sees the content DIV as it loads.
That make sense?
Have found out that Apple has all it's elements opacity set to 0. And on the body load, it adds the classes to the body and uses some basic CSS like this
div{
opacity:0;
}
body.loaded div {
opacity:1;
transition:etc.etc.;
}
Here's my version, http://jsfiddle.net/dqUaX/1/
What's great about it is:
Opacity is considered a CSS3 attribute so if a browser is outdated the content won't hide.
I am actually using jQuery to set the opacity to 0 so even if the user has a css3 browser, but has JavaScript disabled, the content will still display.
Since you'll need CSS3 to hide the div, I used a giant DATA URI for the background image so it doesn't have to load.
Pretty awesome no?
You must put the script before the end of the <body> closing tag...