nuxt解决首屏加载慢问题_干货：网站加载太慢？从图片入手

互联网愈来愈发达，在网站的页面中的图片越来越多，而当用户打开页面的时候，用户只能看到首屏的内容和图片，非首屏图片对用户来说，是没有意义的。如果我们不做图片做任何处理，那用户打开页面的时候，浏览器会加载页面上的所有图片资源。这无疑会增加页面展示时间和其他功能的使用，这也是导致网站加载过慢的原因之一。

人们的智慧是无限的，为了解决这一问题，图片懒加载的技术随之兴起。首先，让我们看一个栗子:

这是一个常规电商推广活动页面的简略版，对用户而言，打开页面的时候，他看到的只有页头和8个商品图片，首屏以下的图片对用户来说，暂时是没有意义的。如果我们不做任何处理，让我们看下页面加载情况：

借助于chrome的开发者插件我们可以观察到(Firefox的firebug同理)：

页面一共25个请求

资源大小为979Kb

页面加载完成时间为 1.40s

其中除了首屏用户可以看到的图片，其他图片对用户来说暂时是没有意义的，所以是可以放在非首屏加载。

下面让我们来谈谈所谓的图片懒加载是什么东西，他不是什么高深的黑科技，也不是魔术师手中的绚丽魔法，却能再一定程度上帮我们解决网站加载过慢的问题。

懒加载原理:

人为干预浏览器的加载，默认不加载任何图片，通过javascript来判断图片是否处于用户的可视范围，如果是进行加载，否则不加载。

实现过程：

1.替换html里面所有图片标签“img”的src属性为其他属性，可自定义；因为浏览器是默认识别img的src属性里面的图片资源链接进行加载，当我们设置为其他属性的时候，浏览器就会放弃加载。

2.把页面上所有的img标签存储起来，根据滚动条高度判断图片是否处于用户可是区域，替换`data-ks-lazyload`为`src`,加载图片；具体代码如下：

是不是很简单，前后不过30—40行的代码；但是具体成果呢，继续上开发者工具：

结果如下：

首屏13个请求

首屏资源大小一共531Kb

总共花费时间：1.29s

虽然这只是一个很简单的栗子，但是以小见大，当我们页面中存在很多图片的时候，图片懒加载无疑是一种很好的加载方式,它可以很好的减少图片请求数，无用的资源加载，让用户可以‘更早’的看到页面和操作页面，实现所在即所得，网页也能节省资源。

各位看官怎么看呢？

想了解更多有关服务器的知识和内容请关注我或者点击数据湾！