Viewer throttling about haruneko

[Pierre-Monier]

I can't see the link, I got a 403 error in the console. I have a non-premium account on CodePen, not sure if it's related

[Sheepux]

I don't have any account, it's open to everyone.

here is the codepen:

<div class="container">
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
  
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
  
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
  
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
  
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
  
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
  
  <img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png" alt="" data-src="https://instagram.ftpe8-4.fna.fbcdn.net/vp/858878e86ee732def268b2b33fadb5bc/5B7554EE/t51.2885-15/e35/30078878_134250340653099_1383951987346767872_n.jpg" />
</div>

body {
  padding: 0;
  padding-bottom: 30px;
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

img {
  margin-top: 30px;
  display: block;
  height: 500px;  
}

(function() {
  
  function throttle(fn, time) {
    let start = new Date();
    return function() {
      let context = this;
      let args = arguments;
      let current = new Date();
      // reach to a time, trigger the function
      if (current - start >= time) {
        fn.apply(context, args);
        start = current;
      }
    }
  }
  
  function lazyLoad() {
    const loadingImage = 'http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder-300x300.png';
    const images = document.getElementsByTagName('img');
    let count = 0;
    return function() {
      const clientHeight = document.documentElement.clientHeight;
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            
      for (let i = count; i < images.length; i++) {
        if (images[i].offsetTop < clientHeight + scrollTop) {
          if (images[i].getAttribute('src') === loadingImage) {
            images[i].src = images[i].getAttribute('data-src');
          }
          count = count + 1;
        }
      }
    }
  }
  

  const loadImages = lazyLoad();
  // load first image
  loadImages();
	window.addEventListener('scroll', throttle(loadImages, 1000), false);
})();

[ronny1982]

Provided with commit 7ac892d