关键词：网页制作；图片延迟加载；JavaScript；用户体验
Web3.0时代，网页中图片量大且页面长，已经成为了大多数网页的标配。如果每次打开网页都需要加载完全部内容后再将页面呈现出来，那么过多的图片加载会占用很大的带宽，严重影响网页的加载速度，导致用户等待时间过长,网络流量消耗巨大。如果根据用户浏览的需要，只将网页可视区域的内容加载后及时呈现给用户，就大大加快了网页的响应速度，增强用户体验；同时还减轻了服务器的负荷，节约网络资源。因此图片延迟加载技术在网页制作中得到了非常广泛的应用。所谓图片延迟加载技术就是不用一次性把网页中的所有图片全部加载完成，而是根据用户浏览的需要，只加载可视区域内的图片，可视区域之外的图片默认是不加载的，随着页面滚动、浏览器重置大小等因素，那些可视区域之外的图片进入可视区域时再逐步加载并显示。
1 JavaScript
JavaScript是Web 页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性能的解释型脚本语言，不但可用于编写客户端的脚本程序，由Web浏览器解释执行，还可以编写在服务器端执行的脚本程序，在服务器端处理用户提交的信息并动态地向客户端浏览器返回处理结果。浏览器中的JavaScript 解释器将直接读入源代码并执行，代码错误只能等到解释器执行到有关代码时才能被发现。如果浏览器中没有解释器，JavaScript代码就无法执行[1]。
2 图片延迟加载技术
2.1 图片延迟加载技术的实现原理
首先给页面中实际的图片区域一张默认的体积非常小的图片，当页面内容全部加载完后，再逐步加载网页可视区域内的真实图片。本文的实现原理是将所有图片的src属性值设置为默认小图片的路径，真实图片的路径放入到自定义属性_src中，当图片到页面顶端的垂直距离小于等于浏览器窗口可视区域的高度加滚动条的高度之和时，图片即将进入可视区域，再把_src的值赋给src。
窗口可视区域的高度：winH = document.documentElement.clientHeight || document.body.clientHeight;
滚动条的高度：scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
当前元素距离页面顶端的高度可以通过元素的offsetTop（垂直偏移位置）值计算，offsetTop是元素上边框顶端到offsetParent上边框底端的垂直距离，offsetParent是距离当前元素最近的一个具有定位（position：relative / absolute / fixed）的祖先元素，若不存在有定位的祖先元素，那么offsetTop值则是元素上边框顶端到页面顶端的垂直距离。需要特别注意的是，当元素设置固定定位（position:fixed;）时，元素的offsetTop值则是该元素上边框顶端到浏览器窗口顶端的垂直距离。
因为元素可能存在多个offsetParent，所以当前元素相对于页面顶端的垂直距离需要通过自定义函数getOffsetTop()实现。
2.2图片延迟加载技术的实现
结构层：
.png)
.png)
</script>
当页面加载完成、浏览器重置大小或者页面滚动时触发匿名函数执行。定义数组arr，每加载一张图片，就在该数组末尾添加一个0，数组的长度即已经加载的图片数量。当数组长度等于页面中的图片总数时，表示页面中的所有图片已全部加载完，再次触发该匿名函数时就不在继续加载图片了。
通过图片的自定义属性check标记该图片是否已经加载。如果已经加载,当该图片再次进入可视区域时，就不再加载该图片了。
3 结束语
本文主要介绍了基于原生JavaScript的图片延迟加载技术的实现原理及延迟加载功能的简单实现。已对代码进行了封装，可以直接应用于实际开发中。但还需要对代码进行优化，如对象到页面顶端的垂直距离距忽略了offsetParent的上边框宽度，图片的淡入淡出等。关于这些做法不在本文详述。
参考文献：
[1] 赵建保.JavaScript前段开发模块化教程[M].北京：人民邮电出版社,2019:4.
[2] 陈立欣.网站优化方法浅谈[J].电脑知识与技术,2013,9(03).
[3]李晓斌.HTML5+CSS3+jQuery Mobile移动网站与App开发实战[M].北京：人民邮电出版社,2018.
论文作者:詹承林
论文发表刊物:《科学与技术》2020年1期
论文发表时间:2020/4/29
标签：加载论文; 图片论文; 页面论文; 可视论文; 元素论文; 区域论文; 用户论文; 《科学与技术》2020年1期论文;