lazySizes_Test

by niuuin

HTML

<head>
  <script src="https://cdn.bootcdn.net/ajax/libs/lazysizes/5.3.2/lazysizes-umd.js"></script>
</head>

<body>
  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">

  <img class="lazyload" data-src="" src="https://dummyimage.com/800x600/e0e9ff/888dbd" alt="">


</body>

CSS

img {
  width: 100%;
  margin: 1rem 0;
}

JavaScript

let imgs = document.querySelectorAll('img');

run();

function run() {
  imgs.forEach(e => {
    let unsplash_src = "https://source.unsplash.com/random/2048x2048/?city";
    e.setAttribute('data-src', unsplash_src);
  });
}