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

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

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

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

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

首先，定义图片为三列，一共有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?

们经常会遇到这样的一个问题。

设计出了很牛逼的设计稿，客户确认了，前端静态制作也出来，还原设计稿95%以上，客户也确认了。

那是个完美啊！！做完程序了，交给客户了。然后客户自己上传了图片了。那个悲催啊！！惨不忍睹啊！！

完全和设计稿两码事？图片不好看，到处都跑位。

客户就骂过来了，你们是否也遇到这样的事情？因为客户的公司没有设计师啊，哈哈，这个问题可能遇到的不少。

其实大家都会说，这归根到底都是客户没有处理图片的问题所造成的。然后大家都推来推去。

那么，前端制作工程师是否有办法解决这样的问题，其实是可以的。如果因图片问题导致布局变了，解决了这个问题就只剩下图片的美观性，那这个就可以跟客户说你要请个设计师帮你处理图片啊。这样不就解决问题了吗？

这种方式和微信朋友圈的九宫格图片展示方式类似，只显示图片中间的内容，其他的将会被隐藏。

举个栗子：

这个列表是不是很整齐，看起来比较舒服，虽然图片有那么点点的变形，但不影响阅读。

如果其中有一张图片的尺寸稍微有一点点不一样，肯定会出现跑位的情况。就像下面这样。这样客户看到不被投诉才怪哦！！

那么就以这个来说说解决方式。

大家都知道图片有一种特性，就是当图片的宽度改变时，高度也会随着等比例在改变。

例如：一张宽高都为100px的图片，如果把宽度调至200px，那么高度是不是也会随之变成200px；没错的，就是利用这个特性来解决布局乱的情况。

这里就拿上一次说到的 “图文列表纯css布局” 那次说的布局来说说，因为都是做好，和上面那个图类似。偷偷懒。如果没看过那篇，搜一下 “图文列表纯css布局”，就可以找到了。（如需下载源码，请关注微信公众号：JS学吧）

效果是这样的：

如何切出占位图呢？如下操作

用PS打开文件，用裁剪工具把图片完整的裁下来，如下图

裁完成，再点击菜单栏目 “图像 > 图像大小” 或按着 Alt键，再点两次 I 键。可以调出 “图像大小” 弹窗。

可以看到 “像素大小” 的宽度和高度都为260px，那么只要调其中一个就可以，就可以达到等比例调整。

我们先调成10px，确定后，再把图层的 “小眼睛” 关掉，另存为一个 png24 的透明图片，记得哦！！一定是要png24的。名字自己定啦！！

然后把 img 中的图片路径改为如下：

<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是发现原来的图片不见的，变成空白的，但是原来的布局结构没有改变。其实要的就是这样的效果。

然后我们在 img 的外层再包个div，就拿这个div来放图片。顺便加个背景色看看效果。

</div>

</a>

看，占位图片的效果出来了。外层div的宽度和高度都被img撑开了。是不是达到了想要的效果。

关键的时候来了。就是处理图片。我们要把产品图片做为背景的形式输出即可以。把图片的路径写在div上面的就解决了。再加上css3新属性就可以了。

HTML如下：

</div>

</a>

用背景样式 background-image 定入路径。再添加一个 cover-img 的类名。然后 cover-img 的样式如下：

.cover-img {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

注意、注意、注意，中要的事说三遍。重点就在于 css3 的新属性 background-size: cove；

这个属性就是会把背景图片，以等比例的形式保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

是不是不明白，那就对了，挺不好理解。最好还是用实际效果来看看。

最终出来的效果就是和最开始的那张图片一样的，只是看不出来而已。

那么我们就来玩真的。直接上网整一张大图的路径放进去看看就知道了。

上某某网站找特大尺寸的图片来，例如下面这张：尺寸是2533x1583，够大了，也不是正方形哦！！我们一开始说的都是正方形，现在弄个不是正方形的图片来试试效果。

HTML如下：

</div>

</a>

更改url里的路径即可

出来的效果如下：

是不是自动调整了。

我们再换一张高形状的图片。二哈图：尺寸是2448x3264

HTML：如下

</div>

</a>

最终效果：

怎么样，效果还可以吧！！不知道你们看出了什么了没有。

第一张是宽形状的图片，是以高度填满 div 的区域。

第二张是高形状的图片，是以宽度填满 div 的区域。

全都是靠着 background-size: cover; 这个属性解决了。但也是有不好的地方。

例如不支持IE浏览器，图片显示不全，多一个文件服务器要多请求一次.....等等问题！！做图时的内容尽可能在正中间。

然后，不管客户上传什么鬼形状的图片，都不会产生布局变乱的情况。

获取《vue3.0大公司后台管理系统开发正规开发流程项目实践》视频，

请点击下面 “了解更多” 或请关注微信公众号《手把手撸码前端》

在线咨询

上一篇：最简单的网页按钮单击函数响应事件，基于javascr
下一篇：Unity Console 中使用 rich tex

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

您的项目需求