网站图片加载技术的设计与实现

项阳阳

（武汉职业技术学院 计算机技术与软件工程学院，湖北 武汉 430074）

随着现代科技的进步，技术的发展，改变了人们的阅读习惯。图片作为最容易引起人类共鸣和最容易被理解的一种传播媒介，被广泛应用于网页设计中。图片文件相对来说比较大，对用户的网络要求比较高，如果一个页面有多张图片，在用户打开的同时加载的话，需要较长时间的数据传输，用户就需要等待一段时间才能看到页面内容。研究表明网页只有在2 s 内打开用户最为满意，用户能够忍受的最长等待时间是6～8 s［1］。因此缩短用户等待时间是网页开发者追求的目标。处理页面的图片加载方式是缩短网页加载时间，提高用户满意度的关键要点是考验前端开发工程师技术的难点。目前业界较成熟的图片处理技术有3 种：懒加载、预加载、两者结合形成的基于用户行为的资源预加载。

1 懒加载的原理及实现

懒加载技术就是进入页面时并不加载全部的页面内容，尤其是图片内容，只加载第一屏内容，当用户滚动屏幕，图片出现在屏幕视窗时再去加载。懒加载实现的原理是通过判断图片是否进入可视窗口确定是否加载图片，防止页面一次性向服务器请求大量请求而导致服务器响应变慢或者一次请求较多资源占用带宽较多造成页面卡顿或者崩溃等问题。

典型的懒加载实现方式是先将img 标签的src 链接设为同一张小图片，将真实的图片地址存放在自定义属性比如data-src 中，之后使用JS 监听浏览器滚动事件，发生滚动时判断需要懒加载的图片元素是否进入可视窗口，进入可视窗口时立即将自定义属性data-src中存放的地址存储到src 属性中加载图片。图片不再是一次性的全部加载，而是随着鼠标的滚动，一张张依次加载进来，提高了网页响应速度，改善用户体验［2］。

懒加载实现的关键代码：

＜img src="test1.jpg" data-src="img1.jpg"＞

//监听滚动函数

$（window）.on（'scroll'，function（） { //检查是否出现在当前可视窗口}）

//加载图片

function showImg（$el）{$el.attr（'src'，$el.attr（'data-src'））；}

懒加载的优点：

（1）懒加载对于图片较多页面很长的业务场景很适用，可以减少无效资源的加载；

（2）显著的提高页面加载速度，又不下载多余的资源节省了流量；同时更少的图片并发请求数也可以减轻服务器的压力。

2 预加载的原理及实现

预加载就是提前加载图片放到本地缓存中，当用户需要使用时，直接从缓存中读取，相对于网络读取速度提高非常多，如果一张网页中图片占据比例较大，采用预加载可以实现图片快速发布，提高用户体验。实现预加载的方法比较多，可以使用CSS/JS 或者两者组合使用，可以根据实际的场景设计合适的解决方案。下面给出一种常见的实现方式——通过CSS 实现预加载：将图片放到窗口外元素上（或者隐藏元素上），在页面的其他地方使用时，直接将img 标签的src 属性设置为对应元素的背景图片地址，此时直接从缓存读取，不需要再次加载，提高响应速度［3］。关键实现代码如下：

#preload01 {background：url （http：//test.com/image01.jpg）no-repeat -9999px -9999px；}

优点：实现简单，不需要任何JS 代码，效率高

缺点：用户进入页面加载页面其他内容时图片一起加载，增加了页面的加载时间，页面首屏的加载可能会产生响应延时。

懒加载是当图片进入可视窗口时加载，可能会产生短暂的延时；预加载可以减少该延时，但是用户并非需要页面上的全部内容，全部加载会浪费带宽或流量资源。如果将二者结合起来，即使用懒加载的省流量省资源，又能够使用预加载无延时的良好体验，便形成基于用户行为的资源预加载。

3 基于用户行为的资源预加载实现

基于用户行为的资源预加载实现：可以通过典型的页面应用选项卡页面来详细讲解。

图1 选项卡页面

选项卡页面是基于用户点击选项卡标签触发切换效果，因此如果用户未点击 “选项卡2”，“选项卡3”按钮，则对应的选项卡内容永远都看不到。在这钟情况下后面两个选项卡的内容就没必要提前预加载了。因此分析完页面之后，需要对“选项卡1”进行预加载，“选项卡2”和“选项卡3”进行懒加载处理。懒加载的加载处理发生在用户点击选项卡按钮之后，那么就会产生短暂的空白，过一会儿图片才会出现，那么结合预加载的思想，是否可以进行改进呢？分析用户点击选项卡的行为，可以拆解为如下步骤：

mouseenter 选项卡-＞mouseover 按钮-＞mousedown按钮-＞产生点击事件，如果用户将鼠标移到选项卡的时候产生mouseenter 或者mouseover 的时候，用户将有极大概率点击该选项卡按钮，因此可以捕捉用户的mouseenter 或者mouseover 行为提前预加载图片。这样就能够将懒加载和预加载完美结合。实现关键代码如下：

＜img src="img1.jpg" class="active"＞

/ 监听mouseenter 鼠标移入行为预加载图片tabs.on（{

mouseenter：function（）{

//src 换成真实地址

target.attr（'src'，target.attr（'data- src'））.removeAttr（'data- src'）}

}

}）；

4 结 语

本文主要描述现在业界常用的Web 前端处理网站图片技术的三种实现方式：懒加载、预加载、基于用户行为的资源预加载。网络页面日益复杂，内容日益多样，因此在网站的开发过程中，开发人员需要仔细分析用户需求，设计代码实现，根据实际需求选择合适的技术实现。