加载图片优化(先用一张小图片做高斯模糊, 再加载大图)

http://www.jackpu.com/medium-shi-ru-he-zuo-tu-pian-jia-zai-de/
<!DOCTYPE html>
<html>
<head>
    <title></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>