I am trying to build a simple app that will show a random image after loading a dummy progress bar.
I manage to create the dummy progress bar and the random image generator separately. Now I want both to function together but I can’t see how to do so…i’m new to this btw.
Random Image Code
<body> <div> <button id="jsstyle" onclick="display_random_image();">Show Image</button> </div> <script> function display_random_image() { var theImages = [{ src: "Image", width: "240", height: "160" }, { src: "Image", width: "320", height: "195" }, { src: "Image", width: "500", height: "343" }]; var preBuffer = []; for (var i = 0, j = theImages.length; i < j; i++) { preBuffer[i] = new Image(); preBuffer[i].src = theImages[i].src; preBuffer[i].width = theImages[i].width; preBuffer[i].height = theImages[i].height; } // create random image number function getRandomInt(min,max) { // return Math.floor(Math.random() * (max - min + 1)) + min; imn = Math.floor(Math.random() * (max - min + 1)) + min; return preBuffer[imn]; } // 0 is first image, preBuffer.length - 1) is last image var newImage = getRandomInt(0, preBuffer.length - 1); // remove the previous images var images = document.getElementsByTagName('img'); var l = images.length; for (var p = 0; p < l; p++) { images[0].parentNode.removeChild(images[0]); } // display the image document.body.appendChild(newImage); } </script> </body>
Fake Progress Bar
<!DOCTYPE html> <html> <style> #myProgress { width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 30px; background-color: #4CAF50; } </style> <body> <h1>JavaScript Progress Bar</h1> <div id="myProgress"> <div id="myBar"></div> </div> <br> <button onclick="move()">Click Me</button> <script> var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); i = 0; } else { width++; elem.style.width = width + "%"; } } } } </script> </body> </html>
Can anyone help me fix my issue?
Advertisement
Answer
Try the following rough attempt.
HTML:
<!-- Button starts the progress bar animation --> <p><button onclick="move()">Start</button></p> <div id="myProgress"> <div id="myBar"></div> </div>
CSS (no changes):
#myProgress { width: 100%; background-color: #ddd; } #myBar { width: 1%; height: 30px; background-color: #4CAF50; }
JavaScript:
var preBuffer = []; // create random image number function getRandomInt(min, max) { var imgIndex = Math.floor(Math.random() * (max - min + 1)) + min; return preBuffer[imgIndex]; } function displayRandomImage() { var theImages = [{ src: "https://picsum.photos/id/237/240/160", width: "240", height: "160" }, { src: "https://picsum.photos/id/137/320/195", width: "320", height: "195" }, { src: "https://picsum.photos/id/37/500/343", width: "500", height: "343" }]; for (var i = 0, j = theImages.length; i < j; i++) { preBuffer[i] = new Image(); preBuffer[i].src = theImages[i].src; preBuffer[i].width = theImages[i].width; preBuffer[i].height = theImages[i].height; } var newImage = getRandomInt(0, preBuffer.length - 1); // remove the previous images var images = document.getElementsByTagName('img'); var l = images.length; for (var p = 0; p < l; p++) { images[0].parentNode.removeChild(images[0]); } // display the image document.body.appendChild(newImage); } var i = 0; function move() { if (i == 0) { i = 1; var myProgress = document.getElementById('myProgress'); var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); i = 0; // Pay attention here!!! // Firstly hide the progress bar myProgress.style.display = "none"; // Then run the image displaying displayRandomImage(); } else { width++; elem.style.width = width + "%"; } } } }