Mitigate Unplanned Scale Issues with an iRule Waiting Room
Published Apr 14, 2020
Version 1.0Was this article helpful?
I also had another version similar to the one I used in my iFile article years back, updated for the new "Jimmy Packets" mascot. The JS is embedded in this one though, I'd recommend stripping it out into it's own file if you go this route. I used a 50x50 pixel image.
<html>
<head>
<meta http-equiv="refresh" content="60">
<title>Online Waiting Room</title>
<style>
</style>
</head>
<script>
var surface;
var happy;
var x = 25;
var y = 25;
var dirX = 1;
var dirY = 1;
function drawCanvas() {
// Get our Canvas element
surface = document.getElementById("myCanvas");
if (surface.getContext) {
// If Canvas is supported, load the image
dcjp = new Image();
dcjp.onload = loadingComplete;
dcjp.src="dcjp_50px.png";
}
}
function loadingComplete(e) {
// When the image has loaded begin the loop
setInterval(loop, 5);
}
function loop() {
// Each loop we move the image by altering its x/y position
// Grab the context
var surfaceContext = surface.getContext('2d');
// Draw the image
surfaceContext.drawImage(dcjp, x, y);
x += dirX;
y += dirY;
if (x <= 0 || x > 700 - 25) {
dirX = -dirX;
}
if (y <= 0 || y > 350 - 40) {
dirY = -dirY;
}
}
</script>
<body onload="drawCanvas();">
<center>
<h2>Online Waiting Room</h2>
<h3>Hey there...sorry about the wait!</h3>
<p>We currently have an exceptionally large number of visitors on the site and you are in the queue.</p>
<p>Please hold tight, it should only be a few minutes. Make sure you stay on this page. Be mesmerized below, and you will be automatically redirected shortly.</p>
<div>
<canvas id="myCanvas" width="700" height="350">
<p>Your browser doesn't support canvas.</p>
</canvas>
</div><br>
</center>
</body>
</html>