Progressive image loading

naseeihity commented 8 years ago

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>progressive image loading</title>
    <style>
        body{
            margin: 0 auto;
            padding: 0;
            background-color: #81C2D6;
        }
        h1 {
            font-family: monospace;
            font-size: 3rem;
            text-align: center;
            color: #fff;
        }
        figure {
            margin: 0 auto 100px;
            max-width: 75%;
            border: 1px solid #f6f6f6;
        }
        .placeholder {
            background-color: #E0CEB8;
            -webkit-background-size: cover;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            padding-bottom: 66.6%;
        }

        .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);
            transform: scale(1);
        }

    </style>
</head>
<body>
    <h1>Progressive Image Loading Demo</h1>
    <figure>
        <div class="placeholder" data-large="http://7xr09v.com1.z0.glb.clouddn.com/lion-wild-africa-african.jpg">
            <img src="http://7xr09v.com1.z0.glb.clouddn.com/rsz_lion-wild-africa-african.jpg" alt="" class="img_small">
            <div class="holder"></div>
        </div>
    </figure>

    <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>

naseeihity commented 8 years ago