图片懒加载 medium效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .placeholder {
      background-color: #f6f6f6;
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      overflow: hidden;
    }

    .placeholder img {
      position: absolute;
      opacity: 0;
      top: 0;
      left: 0;
      width: 100%;
      transition: opacity 1s linear;
    }

    .placeholder img.loaded {
      opacity: 1;
    }

    .img-small {
      filter: blur(50px);
      /* this is needed so Safari keeps sharp edges */
      transform: scale(1);
    }
  </style>
</head>
<body>
    <div class="placeholder" data-large="https://cdn-images-1.medium.com/max/1800/1*sg-uLNm73whmdOgKlrQdZA.jpeg">
      <img src="https://cdn-images-1.medium.com/freeze/max/27/1*sg-uLNm73whmdOgKlrQdZA.jpeg?q=20" class="img-small">
      <div style="padding-bottom: 66.6%;"></div>
    </div>
  <script>
    window.onload = function() {

    var placeholder = document.querySelector('.placeholder'),
        small = placeholder.querySelector('.img-small')

    // 1: load small image and show it
    var img = new Image();
    img.src = small.src;
    img.onload = function () {
      small.classList.add('loaded');
    };

    // 2: load large image
    var imgLarge = new Image();
    imgLarge.src = placeholder.dataset.large; 
    imgLarge.onload = function () {
      imgLarge.classList.add('loaded');
    };
    placeholder.appendChild(imgLarge);
  }
  </script>
</body>
</html>
OPY-bbt / OPY-bbt.github.io

图片懒加载 medium效果 #8
