Firstly, I've searched around and found some things close to what I was looking for but nothing that helped me get to a solution. I have a professional landing page that uses a lot of high res images and stuff so I want to preload it before the users see it so it comes in smoothly. I'm using the below Javascript (I found) to load it in. But I don't think the current Javascript is actually preloading Index.HTML before displaying it. The below javascript is loaded from Preloader.html which I'll display that code below too.
preload.js
(function() {
var preload = document.getElementById("preload");
var loading = 0;
var id = setInterval(frame, 64);
function frame() {
if(loading == 100) {
clearInterval(id);
window.open("index.html", "_self");
return false;
} else {
loading = loading + 1;
if (loading == 90) {
preload.style.animation = "fadeout 1s ease";
}
}
}
})();
Preloader.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="preload" id="preload">
<div class="logo">
</div>
<div class="loader-frame">
<div class="loader1" id="loader1"></div>
<div class="loader2" id="loader2"></div>
</div>
</div>
<script type="text/javascript" src="js/preload.js"></script>
</body>
</html>
I'm pretty sure it's because I'm a complete noob to javascipt and it's only doing window.open and no actual tracking of the index.html page being preloaded. But I couldn't find anything online to confirm this. I believe all my preload.js is doing right now is just on a delay timer using the else statement then it opens index.html without it actually being preloaded.
Thanks for your time, Cheers!
What is going on here is that you're "loading" the page when the counter reaches 100%, and then you're asking the browser to load the page. Indeed no preloading is being done because all that needs to be loaded is the page itself. To sum it up.
The loader page "loads" itself
The loader page displays some animation
When the counter reaches 100, the code asks the browser to navigate to another page
Browser opens page and starts loading the real content
You need to keep all this code together in your page, there is no correct way of knowing the PERCENTAGE of loading from your website, but you can know WHEN it has loaded by using this function:
<script>
window.onload = function() {
alert('page finished loading all images, css and js!');
hideOverlay();
};
</script>
Use this function to hide your overlayElement like so:
function hideOverlay() {
document.querySelector('#preload').style.display = 'none';
}
Related
I have the following code that doesn't redirect when a mobile device accesses the web page. Where I'm I going wrong?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var bodyclass = $('body').is('.index');
if ((screen.width <= 800) && (bodyclass = true)) {
window.location = "m/index.html";
}
</script>
<title>screen stest</title>
</head>
<body class="index">
<div class="style">
<h1>index try10000</h1>
</div>
</body>
</html>
There are a couple of things, first are you sure your device is <= 800px width? Second your script is being loaded in the head and blocks the loading of the remaining DOM structure. As you have code that relies on the DOM being loaded you need to defer the execution of your script until the DOM is loaded. Wrap you code in a DOM ready function (example using jQuery).
$(function() {
var bodyclass = $('body').is('.index');
if ((screen.width <= 800) && (bodyclass = true)) {
window.location = "m/index.html";
}
});
Or better yet, just move your script to be the last element of the body. Then there is no need for a DOM ready wrapper.
I'm loading really big web page with thousands of elements.
How can I test if node has fully loaded including it self and all it child elements but I don't want to wait for whole page to be loaded.
For example lets have this page:
<html>
<head>
<script>
var cnt = 0;
var id = setInterval(function test() {
var e = document.querySelector('#content')
if (!e) return;
// how to test is "e" fully loaded ?
if (cnt == e.childNodes.length) {
clearInterval(id);
} else {
cnt = e.childNodes.length;
console.log(cnt);
}
}, 10);
</script>
</head>
<body>
<div id="content">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div>
<!-- ... add 30k div elements -->
</div>
</body>
</html>
This will print something like this on console:
4448
9448
14448
19448
24948
30000
I think that the load event would be an more apropriate answer to your question.
It can be atached to an ellement and fires when everything is loaded including images and other resources.
some examples you can find here.
https://developer.mozilla.org/en-US/docs/Web/Events/load
https://www.w3schools.com/jsref/event_onload.asp
but if you don't care about the resources than you might want to look at this.
https://developers.google.com/speed/docs/insights/rules
say you want to alert after the div#content is loaded. if you put your javascript after div's closing tag, it will run after loading all the html prior to the script.
<div id="content">
// your content
</div>
<script type="text/javascript">
alert("finished loading until this point");
</script>
I followed a simple tutorial from here. Which basically has the following code
<!doctype html>
<html>
<head>
<base href="http://chessboardjs.com/" />
<link rel="stylesheet" href="/css/chessboard.css" />
</head>
<body>
<div id="board" style="width: 400px"></div>
<script src="/js/chess.js"></script>
<script src="/js/jquery-1.10.1.min.js"></script>
<script src="/js/chessboard.js"></script>
<script>
var init = function() {
var board, game = new Chess();
var makeRandomMove = function() {
var possibleMoves = game.moves();
if (game.game_over() === true || game.in_draw() === true || possibleMoves.length === 0) return;
var randomIndex = Math.floor(Math.random() * possibleMoves.length);
game.move(possibleMoves[randomIndex]);
board.position(game.fen());
window.setTimeout(makeRandomMove, 500);
};
board = new ChessBoard('board', 'start');
window.setTimeout(makeRandomMove, 500);
};
$(document).ready(init);
</script>
</body>
</html>
Everything works fine without any problems. But when I removed <base href="..."> and substituted all links with this base url ( http://chessboardjs.com/css/chessboard.css ). I got the same animation but now with a terrible blinking effect.
This blinking effect does not appear in IE 11.0.1, Firefox 25.0.1, but appears in Chrome 31.0.1650.57 m
I do not understand what is the reason (in my opinion nothing should change).
P.S. after some time I thought that the reason is due to the Chrome's warning while using jQuery event.returnValue is deprecated. Please use the standard event.preventDefault() instead., but when I was able to get rid of it, the problem was still there. So I am completely puzzled.
I am the creator of chessboard.js
This is likely related to Issue 52
Check that whatever webserver is serving the image files for the chess pieces is setting an appropriate expires header for them; it should be returning an HTTP 304 Not Modified after an image file has already been requested.
What is probably happening is the web server is re-serving the image files on every board update and causing the "flicker" effect.
I might change how this functions in future versions, but for now that should probably do the trick.
I want to "preload" the start page of my website with a little gif-animation. Its a 3-frame-piece and I want to show it right before the first page. Are there plugins to preload a page with a specific animation shown?
You don't need a plugin, or even jQuery. Just assign the image to a variable in the <script> block in the <head> of your page. JavaScript prevents the content from loading until it has done it's job, so the image will already be cached by the page visitor when the HTML is rendered:
<head>
<script>
var animation = new Image();
animation.src = "images/animation.gif";
</script>
</head>
<body>
<div>
<img src="images/animation.gif" alt="oooh! lookee!"/>
</div>
</body>
Before I continue:
I am aware this has been done before.
I searched SO for this before deciding to post this...
Said that, I noticed that in some browsers that have settings to clear cache on every visit to a page, certain parts of my page show with delay. I would like to have a function that will display some animated image until the page is finished loading 100%.
I would like to place it in my header include file once and have it kick in every time a page loads. I think I need it to be implemented in AJAX. I would like this function to be a stand-alone, i.e. not tied to any other functions. Shall I use jQuery? Since jQuery itself requires loading an external file, should I implement it as a simple JS function?
Any feedback would be highly appreciated. Examples would be priceless.
:)
EDIT:
I found a plug-in that does exactly what I need.
With jquery you can do something like this
html
<div id="loader"></div>
$(window).load(function () {
$("#loader").fadeOut();
});
You can incldue a div with a loader (have it fixed, or absolute, whatever you like) and then with $(window).load( callback ); you can detect when the whole page has finished loading so you can hide the loader.
Or with pure JS you can do the same,
window.onload = function() {
document.getElementById('loader').style.display='none';
}
You can use the onLoad attribute for . Do something similar to:
<body onLoad='showLoadingDiv()'>
and make the showLoadingDiv function show a full-page white div with a loading sign.
Another (probably preferred) option is to have a
<div style='background:white; width:100%; height:100%'>LOADING</div>
and hide it as soon as the page completely loads, i.e. under jQuery's $(function() { });
This page includes some AJAX progress images to use.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<script type="text/javascript">
//window.onload will wait for images
window.onload = function() {
//find element with id='progress' and hide it
$('progress').hide();
}
</script>
</head>
<body>
<img id="progress" src="https://forums.embarcadero.com/servlet/JiveServlet/download/2-21014-135909-1751/progress2.gif" style="display:show;">
<h1="">This is a solar eclipse</h1>
<img src="http://www.zam.fme.vutbr.cz/~druck/eclipse/Ecl2008m/Tse2008_1250_mo1/Hr/Tse2008_1250_mo1.png" width="50%" style="display:show;">
<p>Pretty and large enough to have to wait for</p>
</body>
</html>
I hope this helps