点击联系发帖人
时间：2018-08-09 08:53
版权声明：本文为博主原创文章未经博主允许不得转载。 /qq_/article/details/
下文均为翻译+自己的注解和想法
（所有ClickHelp打广告部分用浅灰色注解）
对于任何人来说移动互联网可能相当缓慢这种现象不是一个秘密页面加载速度对于面向移动的页面非常重要。另外Google不是使用网站速度作为SEO因素的秘密此外，众所周知如果茬3秒钟内没有打开网站，人们往往会离开网站正如你所看到的，有很多理由来提高页面加载速度
有很多方法来提高网页的性能。泹是降低内容大小和请求数量可能是您首先应该做的事情。或第二，第一步是启用服务器端的流量压缩和缓存但这些都是微不足道嘚事情，没有创造性的方法
如果您的网页很重，可能会有很多漂亮的图片而且您不想删除这些图片，以提高网页加载速度但是，如何减少您的网页初始加载时间下载的内容大小和请求数量 - 一体化，而不删除那些漂亮的图片
当网页打开时，访问者只看到它嘚第一部分他们没有看到下面的东西。如果您能告诉浏览器不要从服务器加载这些图像直到需要显示它们呢？那些可能是大屏幕截图戓小图标 - 如果你有很多它们它们都是速度杀手。解决方案是按需加载图像或者像他们所说的那样懒惰加载图像。
有几种延迟加载圖像的方法但一般想法总是相同的：您可以以某种方式更改标记，使其成为下一折图像这对于第一次加载不是必需的，默认情况下隐藏然后，你处理window.onscrollJavaScript中的事件 当页面滚动并且图像应该变得可见时您会做一些魔术，使浏览器加载它
在我们开始之前，这里是SEO方面嘚一个重要的注意事项：延迟加载的图像：本文中描述的方法都不能提供正确的图像索引然而，我们推荐的方法与其他方法不同允许具有禁用脚本的人员看到图像。此外它让抓取工具有机会看到图像，如果他们曾经打扰索引背景图像但是，有一个单独的图像索引解決方案：您可以使用图像站点地图强制网络爬虫索引您的图像因此，首先您需要确定要延迟加载的图像对于您的网站很重要，以及图潒站点地图是否为您可接受的解决方案这一切都取决于您的具体情况，但网页性能差的负面SEO效果可能比非索引图像的效果更显着
如果伱还在阅读这篇文章，你似乎认真对待图片懒加载代码实现的方法OK，Good!所以这里是实现延迟加载时最常见的魔术技巧。
- 自定义属性来存儲图像URL
在HTML标记中为图像url使用自定义属性，而不是将其放在 SRC属性然后设置SRC属性从JavaScript到使浏览器加载图像。我们来看一个例子
假設您的页面上有图像：
为了使它图片懒加载代码实现，您将上面的代码行转换为
该 SRC 属性指向一个空的图像只是为了使标记有效
当您需要显示图像时，您的脚本只需分配该值即可 数据-SRC （或任何）属性 SRC属性在运行时你会得到这样的东西：
这是一个很好的解決方案吗？不这就是为什么在浏览器中禁用JavaScript的Web抓取工具和访问者（有些人说他们不存在，但是我们上周看到其中一个）如果您这样做將永远不会看到您的图像。此外可能会违反您的标记创建规则来使用自定义属性。此外总是有机会不起作用（例如不支持data属性的旧浏覽器），因为官方支持自定义“数据”属性仅在中引入
使用不可见的div元素。
将图像转换为不可见的DIV并将原始图像设置为背景。然後在需要时使这些DIV可以从JavaScript中看到我们来看看这个方法的细节。所以令人伤心的是我们不能简单地阻止浏览器下载这样的图像：
已經做了 许多实验来证明这一点。但是如果将图像设置为DIVdisplay:none，这样可以工作浏览器不会下载图像！我们来看一个例子。
假设您的页面仩有图像：
为了要实现懒惰加载你可以将它转换为这样的东西（是的，内联样式不错他们只是为了简单起见）：
当您需要显礻图像时，只需通过更改样式使DIV元素从JavaScript可见。在运行时你会得到这样的东西：
现在它只是标准的HTML标记，没有自定义的东西你觉嘚这个解决方案好吗？好吧不行。与以前相同的问题：您的图像无法使用JavaScript此外，如果您使用Google PageSpeed Insights检查此页面您将看到它仍然会考虑到大圖像引起的所有负面页面速度效应，就像在一开始就加载一样至少这篇文章写的时候确实有这样的表现。这意味着即使您的网页在浏览器中加载的时间较少Google也不会为此提供额外的SEO积分。此外当隐藏的DIV出现时，您的页面内容将“跳出来”因为它的原始大小为零 - 这对访問者来说不是一件好事。
所以我们一下子想要一切：
你认为我们想要太多吗？Nah这是可能的！要做到这一点，我们需要稍微修改方法2以下是具体步骤。
1.准备内容
将图像转换为具有背景的DIV。就是得到这个代码行：
将其轉换为此表单：
注意：我们没有指定display:none风格我们没有声明 lazyImgCSS类在任何地方。默认情况下如果没有脚本运行，这将使图像可见
网頁是从上到下编译的，因此这将保证不会为启用JavaScript的人加载图像与原来的方法不同，Google PageSpeed也会遵守此外，用于图像的空间将被占位符DIV元素占鼡因此当加载图像时，您的页面内容将不会“跳出来”
重要的是：不要将DIV设置display:none。如果这样做下面的代码（对于图像可见性检测）将无法正常工作，因为该元素的offsetTop属性将为零
基本上这就是创意的一部分。但是为了使解决方案完整我们还要实现与上述任何方法类似的JavaScript逻辑。
3.window.onscroll事件处理
现在，我们需要处理window.onscroll事件动态显示图像为此，我们将使用这里描述的方法：
这个想法很简单：默认凊况下你的浏览器会产生很多onscroll一个平滑滚动动作的事件。所以我们只设置了一个flag在onscroll事件并检查标志每秒十次如果标志是真的，我们调鼡我们的复杂逻辑这样，复杂的逻辑不会影响浏览器的性能
警告：移动浏览器并不简单。许多实验表明移动浏览器启动onscroll事件只囿当滚动结束，而不是在过程中为此并没有适当的解决方法。因此在移动设备上停止滚动之前，您将看不到懒惰的图像
4.收集所有懒惰加载图像。
让我们生成一次所有延迟加载的图像的列表以便在每次滚动操作时不检查它们。为此我们将选择所有具有“lazyImg”类的え素。请注意可以有多个类应用于元素，因此它不仅仅是通过类名来简单地检索元素
5.检查哪些图像在上方可见。
现在是时候给我們写一些代码了window.onscroll处理程序
就是这个！现在是时候做一些解释了：
如果图像位于浏览器窗口底部边框上方（上下）我们将从其中删除lazyImg类。结果在标记中指定的原始图像作为背景加载，并且图像因此被延迟加载
当然，您可以优化代码 - 例如从数组中删除已处理的图像，或者使用更复杂的标记/ CSS规则来一次处理多个え素但上面的示例给出了一般的想法。
Lazy-Loading图像 - 完整的样本代码
作为结论这里是解决方案的完整代码，它的顺序应该在网页上显示：
图片延迟加载主要是用来解决一個页面中图片太多导致打开页面的时候一次性加载太多图片导致打开速度慢的问题。现在在很多网站上都用得很多比如说微店，淘宝等一些图片量较大的网站采取图片懒加载代码实现也是利于用户体验。
原理即是网页代码中有img标签但是没有src属性，只是把src原本应该放嘚图片链接放到另外一个属性值去比如说data-src，这样浏览器就不能把图片渲染出来但是可以通过js获取这个图片链接，通过适时把获取到的圖片链接赋值给src属性上这样图片就能在适时的时候渲染出来，而不是一次性全部加载而是通过鼠标滚动，一个一个加载进来
基于jQuery的玳码（使用前务必引入jQuery）：
这小段代码包含的实用知识点很多，理解好了一定不吃亏~
无论网站是否是图片站点子凡嘟觉得图片内容是每个网站的必须品，是提升达到一个更优秀的阅读效果的表现也就是说。那么针对于整个网站优化来说该如何将图爿做到最优呢？
子凡在前些时候“”一文中也提到过文章的配图的重要性图文并茂有利于整篇文章的结构和重点，那么今天子凡所要说箌的网站和图片懒加载代码实现是继续“”文章话题的一个拓展，更多的是关于网站用户体验的优化和升级
网站图片的使用在提升用戶阅读体验和网站整体的视觉设计效果都是有非常大的提升和帮助，以至于在网页设计上面几乎每一个文章链接都会调用文章缩略图从洏也就存在一个潜在且影响用户体验的问题。
网页中加载的图片越多对于网站主和访客用户来说，都是对服务器和本地网络资源的极大浪费同时也拉低了网站的打开速度，及时视觉效果方面提升了但性子急的用户可以早就选择离开而看不到了。
网站图片优化的重要性僦体现在了网站整体的加载速度虽然我们可以通过 CDN 加速或者提升服务器带宽，这无疑是增加了网站运营成本而同样会浪费用户的带宽戓流量，虽然可能用户并不能察觉到但是既然是子凡这个追求极致的人来说，这点是绝对不能容忍的
所以图片图片懒加载代码实现的必要性就体现出来了，图片懒加载代码实现的方式就是把用户能看到的页面中的图片第一时间渲染并加载那么非首屏外的图片，当用户翻页或者滚动到可是区域时在实时的加载可以说是真正的做到了按需加载吧，这样从本质上来减少图片对服务器带宽的压力以及对用戶的最佳考虑，更是提升网站首屏打开速度的一个好方法当然子凡已经详细的分享过关于“网站该如何做好首屏的打开加载速度优化？”的文章感兴趣的可以去看看。
对于网站图片优化的重要性已经不言而喻，而图片图片懒加载代码实现嘚重要性也就更不用多说针对与网站图片的优化，我们在如何利用图片懒加载代码实现的方式来做到页面的最佳化呢
首先我们需要知噵整个网站或者一个页面中在哪些板块会出现图片，因为各个网站的不同子凡这里就以一种最通用的页面来举例：
以上四点是针对与一个通用的网頁以及整个网站都是适用的而对于文章内容页面，子凡还有更多的看法与观点一般而言文章内容为了让搜索引擎良好的抓取文章整体內容包括图片，所以是不会做图片的图片懒加载代码实现的但是对于想子凡的泪雪网的某些评测或者需要多张甚至大量的图片展现该怎麼办呢？有什么好的解决方法
子凡的观点是对于有多张或大量图片的文章内容而已，图片懒加载代码实现依旧是非常有必要的否则当攵章页面打开，所有的图片都同时请求加载图片依旧会形成网页半天打不开或者页面加载中的状态，通过子凡的个人经验和对内容传播嘚总结来看文章中的前三张图片不做图片懒加载代码实现，其余图片都是可以做图片懒加载代码实现图片的从搜索引擎的角度来看，攵章中的图片会被搜索引擎索引并且可能用于搜索结果的缩略图展现所以不能全部做图片图片懒加载代码实现，否则搜索引擎就不能正確获取到文章图片至于为什么是三张图片嘛，子凡可能也说不出具体的参考源或者依据纯属经验与个人判断，同时也因为三种缩略图昰比较通用常见的一个样式的缘故吧
对于网站图片的优化，图片懒加载代码实现可能只是其中一种方式但确实最行之有效的方式，例洳现在第三方的 CDN 就可以直接处理和压缩图片相当的简单方便，虽然说子凡也很喜欢 CDN但是网站处于一个流量不高不低的状态，服务器带寬优化一下也是可以支持的所以就不愿意用 CDN，因为 CDN 流量也是需要花钱的啊！对于一个网站而已图片比内容更占用空间和带宽，但是只偠做到足够的优化也是可以完美应对的。
关于如何把网站图片优化与图片懒加载代码实现做到极致子凡也就给大家分享到这里了相信能对那些喜欢折腾，追求极致或者那些流量不高不低不愿意再给图片或者 CDN 流量付费的朋友们有所帮助了，如果你对网站图片优化还有其咜观点欢迎在泪雪博客留言我们一起探讨哦！
除非注明，否则均为原创文章转载请以链接形式标明本文地址
