Press "Enter" to skip to content

Responsive Grid Fade and Intersection Observer Lazyload

Grid Fade and Intersection Observer Lazyload is a responsive fading image grid that uses the Intersection Observer system to lazy load images as they are passed into view.

responsive image grid codepen, css image grid different sizes, image grid examples, css grid image gallery dynamic

How to make use of it:

1. Add placeholder images to the grid.

<div class="grid-container">
  <div class="grid-item"><img src="placeholder.jpg" /></div>
  <div class="grid-item"><img src="placeholder.jpg" /></div>
  <div class="grid-item"><img src="placeholder.jpg" /></div>
  <div class="grid-item"><img src="placeholder.jpg" /></div>
  <div class="grid-item"><img src="placeholder.jpg" /></div>
  ...
</div>

2. CSS/CSS3 Styles Necessary for Image Grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: minmax(270px, 1fr);
  max-width: 1280px;
  margin: 0 auto;
}
.grid-row,
.grid-item {
  display: block;
  overflow: hidden;
}
.grid-item img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  width: 100%;
  height: 100%;
}
.grid-item {
  -webkit-transform: translateY(-10%);
  transform: translateY(-10%);
  opacity: 0;
  -webkit-transition: 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition: 600ms transform cubic-bezier(0.55, 0.055, 0.675, 0.19), 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms;
  transition: 600ms transform cubic-bezier(0.55, 0.055, 0.675, 0.19), 600ms opacity cubic-bezier(0.55, 0.055, 0.675, 0.19) 300ms, 600ms -webkit-transform cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.grid-item.inview {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

3. The main javascript for lazy loading of actual images on the grid.

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
      const rand = Math.floor(Math.random() * 30);
      if (entry.isIntersecting === true) {
          const img = entry.target.querySelector("img");
          entry.target.classList.add("inview");
          img.src = `https://source.unsplash.com/random/960x540/?${rand}`;
      } else {
          entry.target.classList.remove("inview");
      }
  });
});
const items = document.querySelectorAll(".grid-item");
items.forEach((item, index) => {
  observer.observe(item, index);
});

responsive fading image grid, grid fade and intersection observer load image Plugin/Github


See Demo And Download

Official Website(magnificode): Click Here

This superior jQuery/javascript plugin is developed by magnificode. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *