网站大图片加载原理

前面一篇博客讲述的是图片的懒加载过程,即只有页面滑动到图片所在的位置时才会触发加载的操作。本文在此基础上进行了进一步的研究,即不管用户什么时候打开页面,所有的图片都加载了,而不是给用户显示一个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://obrxbqjbi.qnssl.com/blog/image/sakura_min.jpeg"/>
<!--
<img src="https://obrxbqjbi.qnssl.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属性,直接通过这个替换即可,而不是通过特定的规则来约束整个文件的命名。

总结

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

分享到