开发技术前端

网站大图片加载原理

前面一篇博客讲述的是图片的懒加载过程，即只有页面滑动到图片所在的位置时才会触发加载的操作。本文在此基础上进行了进一步的研究，即不管用户什么时候打开页面，所有的图片都加载了，而不是给用户显示一个Loading的图标，只不过我们的初始显示的图片是模糊的，后面再慢慢加载清晰，保证网页加载是流畅的。

有两张图片，都是樱花图，sakura.jpeg和sakura_min.jpeg两张。分别如下：

sakura.jpeg
大小是6.9M，分辨率是6000*4000

sakura_min.jpeg
大小是34K，分辨率是1134*768

可以看到，压缩过的小图片使用了高斯模糊，而且非常小。在3G网络下，我们看两张图片的加载速度：

两张图片的加载速度对比

非常直观地给我们显示出小图片加载的时间为950ms，而大图片的加载时间达到了38.89s。当然了，这只是3G网络下，4G网络下的速度可能会更快一些，但是这个区别还是非常明显的。

我们给出测试页面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>大图片加载测试页</title>
    <style type="text/css">
        img {
            width: 100%;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<img src="https://image.qinjiangbo.com/blog/image/sakura_min.jpeg"/>
<!--
<img src="https://image.qinjiangbo.com/blog/image/sakura.jpeg"/>
-->
<script>
$(function(){
    //一段正则，匹配所有_min的图片src属性
    var test = /_min/
    //遍历所有的图片节点
    $("img").each(function(index,obj){
        if(test.test($(this).attr("src"))){
            var reSrc = $(this).attr("src").replace(test,"");
            $(this).attr("src",reSrc)
        }
    })
})
</script>
</body>
</html>

效果如下：

还有另外一种实现方式就是通过使用data属性，比如在img标签中添加一个data-src属性，直接通过这个替换即可，而不是通过特定的规则来约束整个文件的命名。

总结

关于网页大图片加载的研究有很多，通常是采用的懒加载方式，本文提供了另一种解决的思路，其实从技术实现上来说都差不多，只不过解决的角度不同。

分享到