lazyload-js
Version:
An ancient tiny JS and CSS loader from the days before everyone had written one, Fork from @github/rgrove/lazyload
206 lines (164 loc) • 5.85 kB
HTML
<html>
<head>
<title>LazyLoad Test</title>
<style>
fieldset {
border: 1px solid #afafaf;
margin-bottom: 1em;
}
.log {
font: 10pt Consolas, Menlo, Monaco, fixed;
width: 100%;
}
#css-status {
background-color: #fff;
height: 30px;
margin: 10px auto;
width: 100px;
}
#n1,#n2,#n3,#n4,#n5 { width: 0; }
</style>
</head>
<body>
<h1>LazyLoad Test</h1>
<form>
<fieldset>
<legend>JavaScript</legend>
<p>
<input type="button" id="btnLoadJS" value="Load JS (sequential calls)">
<input type="button" id="btnLoadJSSingle" value="Load JS (single call)">
<label><input type="checkbox" id="jsDelay" checked> Random delay</label>
</p>
<p>
<textarea id="jslog" class="log" rows="15" cols="50"></textarea>
</p>
</fieldset>
<fieldset>
<legend>CSS</legend>
<p>
<input type="button" id="btnLoadCSS" value="Load CSS (sequential calls)">
<input type="button" id="btnLoadCSSSingle" value="Load CSS (single call)">
<label><input type="checkbox" id="cssDelay" checked> Random delay</label>
</p>
<p>
<textarea id="csslog" class="log" rows="15" cols="50"></textarea>
</p>
<div id="css-status"></div>
<div id="n1"></div>
<div id="n2"></div>
<div id="n3"></div>
<div id="n4"></div>
<div id="n5"></div>
</fieldset>
</form>
<script src="lazyload.js"></script>
<script>
var btnLoadCSS = document.getElementById('btnLoadCSS'),
btnLoadCSSSingle = document.getElementById('btnLoadCSSSingle'),
btnLoadJS = document.getElementById('btnLoadJS'),
btnLoadJSSingle = document.getElementById('btnLoadJSSingle'),
cssDelay = document.getElementById('cssDelay'),
cssLogEl = document.getElementById('csslog'),
jsDelay = document.getElementById('jsDelay'),
jsLogEl = document.getElementById('jslog'),
n1 = document.getElementById('n1'),
n2 = document.getElementById('n2'),
n3 = document.getElementById('n3'),
n4 = document.getElementById('n4'),
n5 = document.getElementById('n5'),
cssInterval = null,
js = [
'http://pieisgood.org/test/lazyload/js.php?num=1',
'http://pieisgood.org/test/lazyload/js.php?num=2',
'http://pieisgood.org/test/lazyload/js.php?num=3',
'http://pieisgood.org/test/lazyload/js.php?num=4',
'http://pieisgood.org/test/lazyload/js.php?num=5'
];
function cssComplete() {
csslog('callback');
}
function csslog(message) {
cssLogEl.value += "[" + (new Date()).toTimeString() + "] " + message + "\r\n";
}
function cssPollStart() {
var check = [n1, n2, n3, n4, n5],
i, item;
cssPollStop();
var links = document.getElementsByTagName('link');
cssInterval = setInterval(function () {
for (i = 0; i < check.length; ++i) {
item = check[i];
if (item.offsetWidth > 0) {
check.splice(i, 1);
i -= 1;
csslog('stylesheet ' + item.id.substr(1) + ' applied');
}
}
if (!check.length) {
cssPollStop();
}
}, 30);
}
function cssPollStop() {
clearInterval(cssInterval);
}
// Returns a delay between 0 and 5000ms if enabled.
function getCSSDelay() {
return cssDelay.checked ? Math.floor(Math.random() * 5001) : 0;
}
function getCSSUrls() {
return [
'/css?num=1&delay=' + getCSSDelay(),
'/css?num=2&delay=' + getCSSDelay(),
'/css?num=3&delay=' + getCSSDelay(),
'/css?num=4&delay=' + getCSSDelay(),
'/css?num=5&delay=' + getCSSDelay()
];
}
// Returns a delay between 0 and 5000ms if enabled.
function getJSDelay() {
return jsDelay.checked ? Math.floor(Math.random() * 5001) : 0;
}
function getJSUrls() {
return [
'/js?num=1&delay=' + getJSDelay(),
'/js?num=2&delay=' + getJSDelay(),
'/js?num=3&delay=' + getJSDelay(),
'/js?num=4&delay=' + getJSDelay(),
'/js?num=5&delay=' + getJSDelay()
];
}
function jsComplete() {
jslog('callback');
}
function jslog(message) {
jsLogEl.value += "[" + (new Date()).toTimeString() + "] " + message + "\r\n";
}
btnLoadCSS.onclick = function () {
var urls = getCSSUrls();
cssPollStart();
csslog('loading (sequential calls)');
for (var i = 0; i < urls.length; ++i) {
LazyLoad.css(urls[i], cssComplete);
}
}
btnLoadCSSSingle.onclick = function () {
cssPollStart();
csslog('loading (single call)');
LazyLoad.css(getCSSUrls(), cssComplete);
}
btnLoadJS.onclick = function () {
var urls = getJSUrls();
jslog('loading (sequential calls)');
for (var i = 0; i < urls.length; ++i) {
LazyLoad.js(urls[i], jsComplete);
}
}
btnLoadJSSingle.onclick = function () {
jslog('loading (single call)');
LazyLoad.js(getJSUrls(), jsComplete);
}
</script>
</body>
</html>