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

Posted lele

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了加载图片优化(先用一张小图片做高斯模糊, 再加载大图)相关的知识，希望对你有一定的参考价值。

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>

 

以上是关于加载图片优化(先用一张小图片做高斯模糊, 再加载大图)的主要内容，如果未能解决你的问题，请参考以下文章

Android关于Glide的使用(高斯模糊加载监听圆角图片)

Glide-图片预处理(圆角,高斯模糊等)

webpack打包小图片时进行Base64转码

iOS 图片处理——高斯模糊背景

JavaScript图片加载由模糊变清晰 —— 图片优化

JavaScript 性能优化