My background image is decently large. When my page loads, the HTML is rendered before the background image is loaded onto the page. I would like for the background image to be the first thing to be loaded on the page and then the HTML. Right now it looks weird because without the background image, the text gets pushed up and when the background image is loaded, it all gets pushed to its regular position (not too professional-looking).
Is there anyway in javascript to accomplish this?
Thanks!
I think pre-loading an image is not a solution to you problem since you want the Images to load Before the HTML document is displayed to the user.
i dont have an exact solution but what i did was show a LOADING image to the user while the page loads up and then hide that loading image when the body and images are completely loaded. to do this
<body onLoad="document.getElementById('mydiv').setAttribute('style','display:none');">
<div id=mydiv style="position:absolute;top:0px;left:0px;width:100%;height:100%>
<center> <img src="loading.png>
</center>
</div>
<!-- Other HTML content here -->
</body>
This is just a rough code, hope this helps
You can write javascript that adds the rest of the page to the DOM once everything is loaded.
It's one of the easiest things you can do with jQuery.
However, I don't see the point. As a user I don't want you to do that to me.
Related
I have a Ruby on Rails app that uses Twitter Bootstrap.
On a page, there is a carousel that uses large images. Because on this, I show a loading GIF on the page until all the images are loaded.
So, initially, there is the GIF
<div id="loading-div" class="centered">
<img src="<%= asset_path("page-loader.gif") %>" />
</div>
And after the page is loaded, we hide the carousel, wait for one of the images to load, then hide the GIF and show the carousel. But sometimes, the onload event is called. E.g. when I've already visited the page and I navigate somewhere else then navigate again to the carousel page.
Here's the JavaScript:
$('#home-carousel').hide();
$('#first-image').load(function(){
$('#loading-div').fadeOut(function(){
$('#home-carousel').fadeIn();
});
});
Is there anyway to recheck if the image is already loaded? And if so, don't display the GIF?
Is it possible that the image is loaded before the "onload" and "hide()" are set for the carousel and image?
What's the best way to handle this kind of scenario?
Thanks for your time.
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 have all my JavaScript files linked on the bottom of my page. This way, the HTML can get rendered before loading any of the scripts. The only problem is that the HTML shows to the user before the scripts finish "decorating" the HTML elements. Is there an elegant way to show the user a splash page to your app before the scripts and styles kick in?
You can create a div with position: fixed and a high z-index covering the whole screen as first element in body. A loading animation or text can be shown inside.
The very last line of the body then is a JavaScript which sets display: none to that div.
In your HTML you can write you splash page and overwrite this with real content (which is hidden by default) by using javascript once it is loaded.
However there is a huge drawback to this solution: what if somebody has JS disabled?
Demo: http://jsfiddle.net/FDcNx/
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.