Responsive Lazy Load Images Oldschool

index.pug

h1 Works in every browser

.gallery
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--horizontal
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--horizontal
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--horizontal
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--vertical
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--vertical
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--vertical
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--horizontal
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image.image--big
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))
  .image
    img.lazy-image(data-src="https://source.unsplash.com/random/" + Math.floor(600 + Math.random() * 100))

responsive-lazy-load-images-oldschool.markdown

Responsive Lazy Load Images Oldschool

A Pen by Filip Vitas on CodePen.

License.

script.babel

let lazyImages = [...document.querySelectorAll('.lazy-image')]
let inAdvance = 300

function lazyLoad() {
    lazyImages.forEach(image => {
        if (image.offsetTop < window.innerHeight + window.pageYOffset + inAdvance) {
            image.src = image.dataset.src
            image.onload = () => image.classList.add('loaded')
        }
    })

    // if all loaded removeEventListener
}

lazyLoad()

window.addEventListener('scroll', _.throttle(lazyLoad, 16))
window.addEventListener('resize', _.throttle(lazyLoad, 16))

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

style.stylus

*
  box-sizing: border-box
  
body
  width: 100vw
  height: 100vh
  font-size: 12px
  background-color: #eee
  
.inspiration
  position: fixed
  bottom: 0
  right: 0
  padding: 10px
  text-align: center
  text-decoration: none
  font-family: 'Gill Sans', sans-serif
  font-size: 12px
  color: rgb(150, 150, 150)

h1
  font-size: 2em
  text-align: center
  margin: 10px
  font-family: Nunito, sans-serif
  
.gallery
  display: grid
  grid-auto-flow: dense
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
  // grid-auto-rows: minimax(200px, auto)
  grid-auto-rows: 200px
  grid-gap: 10px
  padding: 10px
   
  .image
    grid-area: span 1 / span 1

    &--horizontal
      grid-area: span 1 / span 2
    &--vertical
      grid-area: span 2 / span 1
    &--big
      grid-area: span 2 / span 2
  
    @media (max-width: 400px)
      &--horizontal
      &--vertical
      &--big
        grid-area: span 1 / span 1

  img
    height: 100%
    width: 100%
    object-fit: cover
    border-radius: 3px
    background-color: black 

  img.lazy-image
    opacity: 0.1
    will-change: opacity
    transition: all 0.3s
  img.lazy-image.loaded
    opacity: 1