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.
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.
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.
I already know how to do a "Splash Screen Div" for a loading page, just wait til everything is loaded and then hide the div or move it off screen.
E.g.
index.html
<div id="loading-Div">
<div id="bear-Logo">
<div id="target">
<div id="target2">
<div id="bearloop"></div>
</div>
</div>
</div>
</div>
loading.css
Just a class called 'fallback' to move the absolute-ly positioned div offscreen.
loading.js
$(window).load(function(){
$( '#loading-Div' ).addClass( 'fallback' );
});
The above is a rather crude example of a "loading Splash Screen Div", I don't know what else to call this, and the .css is imported in the <head> with the .js just before the end of the <body> tag.
This works fine if you click a link and want to show the div while the page loads, but I would like the div to be shown the second the link is clicked, until the destination page is loaded.
Workflow:
http://i.imgur.com/dIOZSMS.jpg
Key Points:
I have a feeling this is only possible with a browser plugin because:
The link isn't an anchor to another div. E.g. url#div -> url#div2
Based on the above, given that the link is to another .html page the content currently displayed would... stop based on how pages are displayed in nature.
Note that:
This is strictly intra-site.
I don't care about IE.
This isn't homework, nor for a client. I am learning web development and thought this would be a cool page transition, per se, and cannot figure out how to do it nicely.
I would prefer not do have an animation and callback for outgoing links to display the div, and then incoming links to display the div as a faked-coherent animation mainly because it wouldn't be coherent unless the download of the second page was instantaneous and because, even if the former was the case, far too much code and therefore file size would go into a coherent animation of whatever the div was to display.
Any ideas guys? I am very stumped on this.
Since your Javascript is at the bottom, it'll load asynchronously, after the page.
index.html
I don't understand why you nested the DIVs that way. Will the page load inside the logo element?
loading.css
With moving the div off the screen, is it part of your animation?
$(".fallback").animate({top: "+=400px", opacity: 0}, 1000);
loading.js
If you want to show an element after the link is clicked, just do it without the window.load function.
http://jsfiddle.net/Etd2D/
I am using the JS Facebook Graph API and want to load a friends list with profile pictures and this takes a few seconds if there are a lot of friends. I want to display a loading div, and once everything is loaded I want to hide the loading div and show the friendliest. I am using JQuery's $(window).load function, but it does not seem to work, the loading div does not show, but still shows content rendering. I think this may be because I'm making the Facebook request in the middle of my page, so the browser might think at the beginning everything is loaded, but have no idea how to fix this.
Put your whole page in a <div style="display:none;"> or simply set the <body style="display:none;"> then change it to :block (using jQuery.show() will work) once you have received the data you are requesting from Facebook.
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.