前端图片延迟加载详细讲解

 

        本来是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的，没想到下午公司项目出现了一些问题，因此一直在改代码进行调试，今天白天一成天又在外面跑，回来已经傍晚了，刚吃完饭，就想着赶忙补上，这样不少不懂这方面具体实现的小伙伴们也能早点学习经验。

         前端页面的用户体验对于一个网站来讲是相当重要的，咱们在访问一些图片量比较大的网站的时候，每每会有这样的感觉：显示在我电脑屏幕可视区域的图片老是不能及时的刷出来，这就形成了对于一些没有什么耐心的用户而言，他们就不肯意多等下去，索性直接关闭了网站去看其余的网站，这就使得本网站的用户量的流失，这每每是一个网站最不肯意看到的状况，那么对于这样的状况而言，开发者们不断的努力，很快就想到了解决的方案，让在可视区域的图片当即加载进来，而让不在可视区域而且须要经过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来，这就比一次性把全部的图片资源加载进来从而形成图片刷新较慢的用户体验好的多的多。

        那么，图片延迟加载的技术具体如何实现呢？下面来作详细的介绍:

        首先，定义图片为三列，一共有5行，具体代码以下：                 

       里面用到的bootstrap的布局技术（固然，这不是重点），请看img标签中的src,一开始咱们并无给它具体的图片的资源路径，而是本身定义了一个属性 x-src，该属性的值是图片图片的资源路径，每一行的img都是如此，接下来，当页面载入的时候，咱们使用jquery(固然，你想javascript原生的代码也能够，我这里只是为了省时间而已)来循环遍历每个img，判断每个图片是否在当前可视区域内，是则显示图片，不然稍后处理，这里须要知道三个数据：

             注：由于我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载，因此须要第三个数据，这个看我的的需求是什么，       若是你的需求是图片只要已进入可视区域内就加载，可直接忽略第三个数据!!!!

                                   1：浏览器可视区域的高度

                                   2：图片相对于文档的偏移量（这里只须要高度上的偏移量）

                                   3：图片元素自己的高度

             若是图片先对于文档的偏移量+图片元素自己的高度的一半    <  浏览器可视区域的高度，即代表图片已经有一半进入的可视区域了，那么我就应该要把这张图片加载进来了，但是img标签的src是为空的，x-src的值才是图片的资源路径，这个时候就须要用jquery将img 标签的x-src值传给src，从而将图片加载进来，具体实现代码以下：

                    

             具体的效果以下：

                      

           你能够在控制台看到，虽然咱们有5行图片,每行有3列，但加载进来的图片只有第一列（图片高度有超出一半的img才会加载图片的资源进来），其余的都没有加载进来，这就使得图片的刷新会很快出现效果，那么接下来，用户须要看到更多的图片，这个时候须要进行滚动条往下滚动，去刷新更多的图片，那么这个时候咱们除了上述的3个数据以外，还须要知道当前滚动条滚动的距离，若是：

                              图片先对于文档的偏移量+图片元素自己的高度的一半    <  浏览器可视区域的高度  + 当前滚动条滚动的距离，那么代表当前图片已经在可视区域内，而且图片有一半以上的高度是在可视区域内，那么将图片进行加载进来，具体代码以下：

                    

           具体效果以下：

                    

          在控制台你能够看到，随着滚动条的滚动，加载进来的图片由原来的三张变成了如今的六张，滚动条不断的往下滚动，图片就会不断的加载进来，从而获得更好的用户体验。

          这就是图片延迟加载的具体实现，是否是以为图片的炫酷，若是你想本身看下具体的实现效果，能够点击个人网址进行查看：

                                    http://meichao.sinaapp.com/show.html

 原文连接：http://www.gbtags.com/gb/share/6366.htm?