如何加快网站的打开速度－－图片分批加载

我们开发网站的目的就是给需要的人群浏览的，既然是面向人群，那么用户体验就不得不关注。有调查显示，绝大部分用户在同一个网页不会停留超过7秒钟，而我停留都不会超过3秒钟，因此，如何在更短的时间内打开我们的网页，就显得尤其重要了。

然而，影响网页响应和打开速度的因素非常多，要做好一个网站，就需要注意多方面的因素影响，克服所有可能影响网站打开速度的障碍。

提升网页打开速度的入手点非常多，我们能做的，仅仅是从代码和页面结构设计上来做好我们分内的事情。如今一个合格的前端工程师并非仅仅把设计师的设计图转化成可以浏览的网页，还需要加入用户体验，设计思想，响应速度，网站性能，网站可维护性和可扩展性等等，都是需要前端去思考和努力的方向。

一个网页打开的过程中，需要加载html，js，css，图片等。html的加载时间是非常短的，几乎可以忽略，其它的素材则相对比较费时一些。这里我讲一下如何从图片的角度来加快网页的加载速度。

首先我们需要合理的选择图片的格式，比如GIF，png，jpg，在不损失图片质量的情况下，我们可尽量选择使用jpg的图片。然而如果一个网页的图片非常的多，要一次性加载出来，可能就会造成很长时间的等待，这时候如果可以实现图片的按需加载，是不是就很牛逼很理想了呢？

何为按需？其实就是我们打开的时候第一眼需要看到的地方，也就是当前屏幕区域，那如果我们在打开网站的一瞬间，只需要加载我们当前屏幕的图片，是不是会快很多？想想都很激动吧。随着我们不断的滚动网页，往下流览，再相继去加载别的图片，哇塞，是不是很爽呢？

下面我就来教大家如何实现这牛逼的功能吧。

首先，这个功能需要借助jquery插件，是一个比较成型的插件，所以我们需要引入jquery库

其次，需要下载scrollLoading.js这个插件到自己的项目中，并且插入到需要使用的页面中。

然后，给网页中所有的图片添加一个class，比如就叫loading_img吧。

同时，吧img图片的url放到img标签的data-url属性上，如下：

src属性放置一个默认的展位图。

最后，使用插件：

$('.loading_img').scrollLoading();

就这么简单，就可以实现图片的分批加载。是不是很牛逼！如果你想更熟悉的掌握这个技能，可以关注我的微信公众号，或者自己动手试试。日后我会以视屏课程的形式演示给大家，以便让大家有一个直观的感受。