Skip to content

JavaScript – show image after progress bar loads when click button

Deepak Kumar
Rodrigue

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 + "%";
      }
    }
  }
}