浏览器可见区域显示的图片总是无法及时刷新，导致可见区域的图片立即加载，而那些显示在浏览器可见区域的图片总是无法及时刷新不在可见区域需要通过滚动条滚动显示的图片滚动到可见区域后显示。本来打算昨天下午写一篇关于前端图片延迟加载详细技术的博客。没想到下午公司的项目出了点问题，就一直在改代码调试，今天在外面跑了一整天，回来的时候已经晚上了。刚吃完，想赶紧补上，让很多不了解这方面具体实现的朋友也能早点吸取经验。前端页面的用户体验对于一个网站来说是非常重要的。当我们访问一些图片量很大的网站时，常常会有这样的感觉：我电脑屏幕可见区域显示的图片总是不及时，导致一些不耐烦的用户不愿意再等了，干脆关闭网站直接去看其他网站，造成了本网站用户的流失，这往往是一个网站最不愿意看到的情况。对于这样的情况，开发人员一直在努力，很快就想出了解决方案，让可见区域的图片立即加载，不在可见区域的图片需要显示在viewingarea和needtobescrolledthroughthescrollbar在图片滚动到可见区域后显示，这比一次性加载所有图片资源导致图片刷新慢要好很多。.那么，图片延迟加载的技术是如何实现的呢？下面是详细介绍：首先定义图片为三列，共5行，具体代码如下：其中用到的bootstrap的布局技术（当然这不是重点），请看img标签中的src，一开始我们并没有给它具体的图片资源路径，而是定义了一个属性x-src，这个属性的值就是图片image的资源路径，每一行的img就是同样，next，当页面加载的时候，有时候，我们使用jquery（当然你也可以使用javascript原生代码，我就是为了节省时间）循环遍历每一个img，判断每张图片是否在当前可视区域,如果有就显示图片，否则我后面再处理，这里需要知道三个数据：注：因为我写的是当一半图片进入可视区域时加载图片浏览器，所以需要第三个数据，这个看个人你的要求是什么？如果你的要求是图片一进入可见区域就加载，可以直接忽略第三条数据！！！！1：浏览器可见区域的高度2：图片相对于文档的偏移量（这里只需要高度偏移量）3：图片元素本身的高度如果图片的偏移量为document+图片元素本身高度的一半<浏览器可见区域的高度，说明图片已经有一半可见区域进入了，所以应该加载这张图片，但是src的img标签为空，x-src的值为图片的资源路径。这时候就需要使用jquery将img标签的x-src值传递给src来加载图片。具体实现代码如下：具体效果如下：在控制台可以看到，虽然我们有5行图片，每行3列，但是loading进来的图片只在***column（超过图片高度一半的img会加载图片的资源），其余的不加载进去，这样可以快速出现刷新图片的效果。那么，用户需要查看更多的图片，我们就需要向下滚动滚动条来刷新更多的图片。这时候，除了上面3个数据，我们还需要知道当前滚动条的滚动距离。如果：图片先为文档的偏移量+图片元素本身高度的一半<浏览器可见区域的高度+当前滚动条的滚动距离，说明当前图片已经在可见区域，并且图片的一半以上高度在可见区域，然后加载图片，具体代码如下：具体效果如下：在控制台中，可以看到随着scroll的滚动bar，加载的图片从原来的三张变成了现在的六张，滚动条一直向下滚动，图片将继续加载，以获得更好的用户体验
