CODEWITHSUNDEEP
htmlreactjsnext.jsimage-optimization
brianso123
brianso123

Reputation: 1

Next.js static site image keep reload on scroll

I was trying to create an image gallery with next.js, there are around 40 images from top to bottom. After all the images finished loading, when I scroll back to the top, all the image reloads. (like the image are blank white for 0.5 second and then start to load from top to bottom.), and this situation will persist --- when I scroll to bottom again this will happen again, and scroll back to top it happens again.

I tried compressing the image so that the total size of all those image is within 20Mb, all in webp format. Since next.js static site does not support image optimisation, I disabled it with the following code in next.config.js

images: {
    unoptimized: true,
  },

the jsx is just a very simple flex-box structure like below

<div>
  <div className="col">
    <img src={photo} className="img" />
    <img src={photo2} className="img" />
    .
    .
    .
    <img src={photo8} className="img" />
  </div>
  <div className="col">
    <img src={photo} className="img" />
    <img src={photo2} className="img" />
    .
    .
    .
    <img src={photo8} className="img" />
  </div> 
</div>

.col {
  display: flex;
  flex-direction: column;
  width: 50%;
  gap: 10px;
}

.img {
  object-fit: contain;
  width: 100%;
}

Upvotes: 0

Views: 603

Answers (0)

Related Questions