渐进式图片加载效果

渐进式图片加载效果

前些日子在逛知乎,发现有个效果挺不错的,就是当一开始页面上的图片是模糊的,过一会图片变清晰。突然感觉这种效果比传统的占位图效果要好的多,于是在好奇心的驱使下百度了一下效果,得出的实现常用可以分为图床和图片地址替换。下面简单叙述一下两个方案的实现思路:

图床

就是在图片原来的地方放一个标签用来放模糊的照片,盖在原来清晰大图片的上方,当大图加载成功后,原来盖在上面的图片隐藏掉。图床可以是一个Div或者是Canvas等。

地址替换

思路和上面差不多,一开始的时候先加载一张低清的图,把高清图片的地址存在某个属性里,等页面加载完成后,用JS取到高请图片的地址,然后用image对象加载,等加载完成后再把图片地址替换成高清的地址。

本文介绍的是方法二用地址替换的方式来实现:

案例效果

案例效果

案例代码

<!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>Processing Image Effect Demo</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="img-con" id="imgCon">
        <img src="./img/1_small.jpg" data-src="./img/1_big.jpeg" alt="图片1" id="img">
        <img src="./img/2_small.jpg" data-src="./img/2_big.jpg" alt="图片2" id="img">
        <img src="./img/3_small.jpg" data-src="./img/3_big.jpg" alt="图片3" id="img">
        <img src="./img/4_small.jpg" data-src="./img/4_big.jpg" alt="图片4" id="img">
        <img src="./img/5_small.jpg" data-src="./img/5_big.jpg" alt="图片5" id="img">
    </div>
    <script>
        window.onload = function() {
            var imgCon = document.getElementById('imgCon')
            var imgs = imgCon.getElementsByTagName('img')
            for (var i = 0; i < imgs.length; i++) {

                (function(curImg) {
                    var tempImg = null;
                    tempImg = document.createElement('img')
                    console.log(curImg)
                    tempImg.src = curImg.dataset.src;
                    tempImg.onload = function(e) {
                        curImg.src = tempImg.src
                        curImg.style.filter = 'blur(0px)'
                    }
                })(imgs[i])
            }
        }
    </script>
</body>
</html>
.img-con img {
    width: 100%;
    height: 400px;
    -webkit-transition: filter .3s ease-out 0s;
    -moz-transition: filter .3s ease-out 0s;
    transition: filter .3s ease-out 0s;
    filter: blur(10px);
    -ms-filter: blur(10px);
    -webkit-filter: blur(10px);
}

关键知识点

  • JS Image对象
  • CSS3 filter blur 属性

注意: Image对象读取图片的过程是异步的,需要弄清楚代码执行的时序问题

周周练
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。