JavaScript Image Loaded

This JavaScript code snippet helps you to create an image load. It fetches 30 random images from the “picsum.photos” API and generates a lazy-loading gallery using the Intersection Observer API. The first function sets the “onload” event of the window object to execute the code once the window has finished loading. It fetches the images and parses the response into JSON format. Once the images are obtained, the “createImages” function is called, which generates an “img” HTML element for each image with a “data-lazy” attribute and a “lazy-loading” class. The “lazyLoad” function sets an Intersection Observer for each “img” element to detect.

Finally, intersect with the viewport, and lazily loads them by changing the “src” attribute to the value of the “data-lazy” attribute, and adding a “fadeIn” class to create a fade-in effect.

How to Create JavaScript Image Loaded

Create the HTML structure for the image load as follows:

<h1>Lazy Loading Images</h1>

    <!-- Images Container -->
    <div id="imagesContainer"></div>

    <!-- Loading spinner -->
    <div class="loading-indicator">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

Now, style the image load using the following CSS styles:

/**
 * This CSS is for the Content
 */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

h1 {
  text-align: center;
  font-family: sans-serif;
  font-weight: 200;
}

#imagesContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto;
  width: 680px;
}

#imagesContainer img {
  width: 300px;
  min-height: 200px;
  margin: 20px;
  box-shadow: 5px 10px 15px;
}

.cd__main{
display: block !important;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
}

/**
 * This CSS is for the Loading Spinner
 */
.loading-indicator {
  margin: 2em auto;
  position: relative;
  width: 64px;
  height: 64px;
}
.loading-indicator div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px;
}
.loading-indicator div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: grey;
  margin: -3px 0 0 -3px;
}
.loading-indicator div:nth-child(1) {
  animation-delay: -0.036s;
}
.loading-indicator div:nth-child(1):after {
  top: 50px;
  left: 50px;
}
.loading-indicator div:nth-child(2) {
  animation-delay: -0.072s;
}
.loading-indicator div:nth-child(2):after {
  top: 54px;
  left: 45px;
}
.loading-indicator div:nth-child(3) {
  animation-delay: -0.108s;
}
.loading-indicator div:nth-child(3):after {
  top: 57px;
  left: 39px;
}
.loading-indicator div:nth-child(4) {
  animation-delay: -0.144s;
}
.loading-indicator div:nth-child(4):after {
  top: 58px;
  left: 32px;
}
.loading-indicator div:nth-child(5) {
  animation-delay: -0.18s;
}
.loading-indicator div:nth-child(5):after {
  top: 57px;
  left: 25px;
}
.loading-indicator div:nth-child(6) {
  animation-delay: -0.216s;
}
.loading-indicator div:nth-child(6):after {
  top: 54px;
  left: 19px;
}
.loading-indicator div:nth-child(7) {
  animation-delay: -0.252s;
}
.loading-indicator div:nth-child(7):after {
  top: 50px;
  left: 14px;
}
.loading-indicator div:nth-child(8) {
  animation-delay: -0.288s;
}
.loading-indicator div:nth-child(8):after {
  top: 45px;
  left: 10px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Finally, add the following JavaScript function for its functionality:

window.onload = () => {
  // Get 100 random images
  fetch('https://picsum.photos/v2/list?limit=30')
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      // Call the createImages function to generate the HTML code
      createImages(myJson);
      // Remove the loading spinner
      document.getElementById('lds-roller').remove();
    })
    .catch(err => {
      console.log(err);
    });
};

function createImages(imgs) {
  for (let i of imgs) {
    // Create an image HTML tag
    const image = document.createElement('img');
    image.setAttribute('data-lazy', i.download_url);
    image.classList.add('lazy-loading');
    document.getElementById('imagesContainer').appendChild(image);
  }
  // Sets an observer for each image
  lazyTargets = document.querySelectorAll('.lazy-loading');
  lazyTargets.forEach(lazyLoad);
}

// The lazy loading observer
function lazyLoad(target) {
  const obs = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        img.classList.add('fadeIn');

        observer.disconnect();
      }
    });
  });
  obs.observe(target);
}

That’s all! hopefully, you have successfully created the JavaScript image loaded. If you have any questions or suggestions, feel free to comment below.