在网页上加载一张图片往往需要很长的时间,这是影响用户体验的一个较大的因素。
我们可以将通过使用一些图片懒加载的技巧,来提高用户体验,增加网站的访问量。
就此,让我们开始了解什么是懒加载,并投入学习!
懒加载是Web和应用程序开发中的一组技术,可将页面上的资源加载推迟到以后需要这些资源时,而不是先加载它们。这些技术有助于提高性能,更好地利用设备资源并降低相关成本
这种技术旨在通过按需加载图片来提升网页的加载时间。
懒加载意味着,如果我们不主动地下滑查看位于页面底部的图片,这些图片是不会被加载的。
这种懒加载的技巧适用于页面上的任何资源(特指异步和耗时的资源)
在这篇教程中,我将给通过 Javascript 你展示一些图片懒加载的技巧。
技巧一:使用JavaScript的事件
1. 创建 HTML
创建。这个标签有 src 属性,用于加载图片。如果 src 被赋值, 将会根据相应地址加载图片。
为了阻止图片的加载,我们将图片的地址赋值给中的 data-src 属性(data-src 并非 的标准属性,可随意指定)。
2. 添加 CSS
设置图片的宽(width)、高(height)、外边距(margin)
将 display 设置为 block,以便使图像成为块级元素。在其上下有一些空白区。
img {
width: 500px;
height: 350px;
display: block;
margin: 10px auto;
}
准备工作已经完成。是时候告诉浏览器何时加载图片了。
我们需要三个事件:scroll, resize, orientationChange ,它们都同样的重要。scroll 事件会在页面展示时与元素滑动时执行。resize 会在窗口的大小改变时执行。orientationChange 会在设备的方向改变执行。这三个事件会监控屏幕和指定懒加载的图片,并触发图片的加载。
如果上述三个事件中的任何一个执行的话,我们将找到页面上所有指定懒加载的图片。通过图像的顶部偏移量、文档的顶部位置和窗口的高度来计算其中的哪些图片在视口(viewpoint)内。如果图片进入视口,我们将中的 data-src 属性的值赋给 的 src 属性,当 的 src 属性被赋值, 便会开始加载图片。
我们将指定懒加载的图片的 class 命名为 “lazy-load”,以便通过其找到这些图片。当图片加载之后,“lazy-load”和事件监听器都会被删除。