0

I'm learning how to code and I wanted to link a loading page to my HTML but it doesn't seem to be working. I got my code from here but it seems like it's not working at all. If you guys could identify the problem, that'd be great.

This is the code as of now: 

<html> <head> <meta charset="UTF-8"> <title>Loading</title> <link href="demo.css" rel="stylesheet" type="text/css"> <link href="normalize.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
Improve this question
5
  • I'm sorry for the stupid question, but where would I put the brackets? Commented Jun 4, 2016 at 5:59
  • what do you want exactly ? you would like to show loading image while page is loading ? Commented Jun 4, 2016 at 6:04
  • To show the loading image while the page is loading Ramkee Commented Jun 4, 2016 at 6:05
  • Fine, Are you willing to use JQuery ? Commented Jun 4, 2016 at 6:06
  • If you're just looking to show a "spinner" or "loader" image, there are much easier ways to do it for a beginner programmer than drawing shapes on a canvas. I recommend finding a loader graphic online, or create one using a site like ajaxload.info. There are many tutorials on how to show a loader graphic and hide it when the page is loaded. Commented Jun 4, 2016 at 6:57

2 Answers 2

Reset to default
1

I did not find your code.

So Here is a sample approach.

While the page is loading, image will be displayed at the middle of the page and the entire page is in transparent background. So Whenever your page gets loaded, then add hidden class to that image div.

Create 2 Classes one is to make div hidden. 

.hidden{ display:none; }

Second one to show image. 

.show_image{ position:fixed;top:0;right:0;bottom:0;left:0; background: rgba(0,0,0,0.5) url(/img/spinner.gif) no-repeat 50% 50%; z-index:100; background-size: 5ex; }

And your HTML code would be

<div class="show_image"></div> <div class="hidden box"> Your actual content </div>

Initially your content will be hidden state and loading image will be displayed.

After completion of page loading just toggle the hidden class. 

$('.box').removeClass("hidden"); $('.show_image').addClass("hidden");

You can use load function to know that page is fully rendered.

 $(window).load(function() { //everything is loaded });

So that your content will become visible and loading image will be hidden.

Let me know if you need to any help regarding Page Load.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

you can try this one:

function onReady(callback) { var intervalID = window.setInterval(checkReady, 1000); function checkReady() { if (document.getElementsByTagName('body')[0] !== undefined) { window.clearInterval(intervalID); callback.call(this); } } } function show(id, value) { document.getElementById(id).style.display = value ? 'block' : 'none'; } onReady(function () { show('page', true); show('loading', false); });

DEMO HERE

Improve this answer

4 Comments

Nice work, what if page loading takes more than 1000 ms ?
if u add 100 seconds loading time is fast ..@Ramkee
Yes, i understand that, my question.. is if that page loading time takes 3000 ms what will happen ? Loading image will be disappear after 1000ms (As you mentioned).
If page loading takes more than 1000 ms then this current page will disappear and it will load next page automatically @Ramkee

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.