Skip to content

Instantly share code, notes, and snippets.

@ehzawad

ehzawad/asyncfetchandinfinitescroll.html

Created August 7, 2023 18:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ehzawad/09916f0c8dde750de06b1797cc08190a to your computer and use it in GitHub Desktop.
Save ehzawad/09916f0c8dde750de06b1797cc08190a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
asyncfetchandinfinitescroll.html
<!DOCTYPE html>
<html>
<head>
<style>
#images {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: 150px;
gap: 10px;
padding: 10px;
box-sizing: border-box;
width: 100%;
height: 100%;
}
#images img {
object-fit: cover;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="images"></div>
<script>
let loading = false;
const url = 'https://api.thecatapi.com/v1/images/search?size=full&limit=12';
const imagesDiv = document.getElementById("images");
const loadImages = async () => {
if (loading) {
return;
}
loading = true;
const response = await fetch(url);
const data = await response.json();
data.forEach(imageData => {
var html = `<img src="${imageData["url"]}">`;
imagesDiv.innerHTML += html;
});
loading = false;
};
window.onscroll = () => {
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2) {
loadImages();
}
};
// Initial image loading
const checkScroll = async () => {
await loadImages();
if (document.body.offsetHeight <= window.innerHeight) {
checkScroll();
}
};
checkScroll();
</script>
</body>
</html>
@ehzawad
Copy link
Author

ehzawad commented Aug 8, 2023 •
edited 

<!DOCTYPE html>
<html>

<head>
  <style>
    #images {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
      grid-auto-rows: 350px;
      gap: 10px;
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }

    @media (max-width: 900px) {
      #images {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      }
    }

    @media (max-width: 600px) {
      #images {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      }
    }

    #images img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="images"></div>

  <script>
    let loading = false;
    const url = 'https://api.thecatapi.com/v1/images/search?size=full&limit=12';
    const imagesDiv = document.getElementById("images");

    const loadImages = async () => {
      if (loading) {
        return;
      }
      loading = true;
      const response = await fetch(url);
      const data = await response.json();
      data.forEach(imageData => {
        var img = new Image();
        img.src = imageData["url"];
        img.loading = "lazy"; // Enables lazy loading
        imagesDiv.appendChild(img);
      });
      loading = false;
    };

    window.onscroll = () => {
      if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2) {
        loadImages();
      }
    };

    // Initial image loading
    const checkScroll = async () => {
      await loadImages();
      if (document.body.offsetHeight <= window.innerHeight) {
        checkScroll();
      }
    };

    checkScroll();
  </script>
</body>

</html>

@ehzawad
Copy link
Author

ehzawad commented Aug 8, 2023 

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #images {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
      grid-auto-rows: 350px;
      gap: 10px;
      padding: 10px;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
    }

    @media (max-width: 900px) {
      #images {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      #images {
        grid-template-columns: 1fr;
      }
    }

    #images img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id="images"></div>

  <script>
    let loading = false;
    const url = 'https://api.thecatapi.com/v1/images/search?size=full&limit=12';
    const imagesDiv = document.getElementById("images");

    const loadImages = async () => {
      if (loading) {
        return;
      }
      loading = true;
      const response = await fetch(url);
      const data = await response.json();
      data.forEach(imageData => {
        var img = new Image();
        img.src = imageData["url"];
        img.loading = "lazy";
        imagesDiv.appendChild(img);
      });
      loading = false;
    };

    window.onscroll = () => {
      if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2) {
        loadImages();
      }
    };

    const checkScroll = async () => {
      await loadImages();
      if (document.body.offsetHeight <= window.innerHeight) {
        checkScroll();
      }
    };

    checkScroll();
  </script>
</body>

</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment