网页图片加载缓慢,移动端图片延迟加载
由于图片是网络上最流行的内容类型之一，网站的页面加载时间很容易成为一个问题。
即使经过适当的优化，图像也会有相当大的权重。这可能会对访问者在访问网站内容之前的等待时间产生负面影响。很可能，他们会失去耐心，转向其他地方，除非你能提出一个不影响速度感知的图像加载解决方案。
在本文中，您将学习五种延迟加载图像的方法，您可以将它们添加到web优化工具包中，以改善您站点上的用户体验。
什么是延迟加载？
延迟加载图片意味着在网站上异步加载图片——。也就是说，网站上的折叠内容被完全加载后，甚至只有出现在浏览器的查看区域时才被有条件加载。这意味着，如果用户没有一直向下滚动，位于页面底部的图像甚至不会被加载。
很多网站都用这种方法，但在图片密集的网站上尤为明显。尝试浏览你最喜欢的高分辨率照片的在线搜索网站，你很快就会意识到该网站只加载有限数量的图片。当您向下滚动页面时，您将看到占位符图像快速填充真实图像以供预览。例如，注意unsplash.com上的加载器：将页面的这一部分滚动到视图中会触发用全分辨率照片替换占位符：
为什么要关心延迟加载图像？
至少有两个很好的理由让你考虑延迟为你的网站加载图片：
如果您的网站使用JavaScript来显示内容或向用户提供某种功能，那么快速加载DOM就变得至关重要。在脚本开始运行之前，它通常会等到DOM完全加载完毕。在有大量图片的网站上，延迟加载或者异步加载图片可能会影响用户的去留。由于大多数延迟加载解决方案只在用户滚动到可以在视窗中看到图像的位置时才加载图像，如果用户从未到达该位置，这些图像将永远不会被加载。这意味着节省了大量带宽，大多数用户，尤其是那些在移动设备上访问网络且连接缓慢的用户，会感谢你的。嗯，延迟加载图像有助于网站性能，但最好的方法是什么？
没有完美的方法。
如果您使用JavaScript，那么实现您自己的延迟加载解决方案应该不成问题。没有什么比编写自己的代码给你更多的控制权。
或者，你可以浏览网页，找到可行的方法，并开始使用它们。我就是这么做的，然后就碰到了这五个有趣的技巧。
1使用Intersection Observer API进行延迟加载
交叉点观察器API是一个现代化的接口，可以用来延迟加载图像和其他内容。
MDN是这样介绍这个API的：
交叉点观察器API提供了一种异步观察目标元素与祖先元素或顶级文档视口的交叉点的方法。
换句话说，异步观察是一个元素与另一个元素的交集。
Denys Mishunov有很好的关于交叉观察者和延迟加载图像的教程。这是他的解决方案的样子。
假设你想偷懒加载图片库。每个图像的标记如下：
img data-src= image . jpg alt= test image 注意图像的路径是如何包含在data-src属性而不是src属性中的。原因是使用src意味着镜像会立即加载，这不是你想要的。
在CSS中，您可以为每个图像指定100像素的最小高度值。这为每个图像占位符(没有src属性的img元素)提供了一个垂直维度。
img {最小高度：100px.更多样式在此处}在JavaScript文档中，然后创建一个配置对象并在intersectionObserver实例中注册它：
//创建配置对象：rootMargin和threshold//是interface const config={ root margin: 0px 0px 50px 0px ，threshold: 0}公开的两个属性；//向intersectionObserverlet observer的实例//注册config对象=new intersectionObserver(function(entries，self) { //迭代每个条目entries.forEach(entry={ //仅处理相交的图像。//is intersection是接口if(entry . is intersection){//自定义函数公开的属性，将img //的路径从data-src复制到src preload image(entry . target)；//图像现已到位，停止观看self . unobserve(entry . target)；} });}，config)；最后，遍历所有图像，并将它们添加到这个iterationObserver实例中：
const imgs=document . query selector all([data-src])；imgs . foreach(img={ observer . observe(img))；});这种解决方案的优点是：实现简单有效，使intersectionObserver做了大量的计算工作。
另一方面，尽管大多数浏览器的最新版本都支持交叉点查看器API，但并不是所有浏览器都一致支持它。幸运的是，有一个多填充物可用。
2 Robin Osborne逐步增强的延迟加载
罗宾奥斯本提出了一个基于渐进增强的超级巧妙的解决方案。在这种情况下，JavaScript本身实现的延迟加载被认为是对传统HTML和CSS的增强。
逐渐增强的原因？那么，如果您使用基于JavaScript的解决方案来显示图像，如果JavaScript被禁用或某个错误阻止了脚本正常工作，会发生什么呢？在这种情况下，如果没有逐渐增强，用户可能根本看不到图像。不酷。
你可以在这支笔里查看基本版奥斯本方案的详情；在另一支笔中，你可以看到一个更全面的解决方案，它考虑到了破坏JavaScript的情况。
这项技术有许多优点：
增量方法确保用户始终可以访问内容。它不仅适用于JavaScript不可用的情况，也适用于JavaScript崩溃的情况：我们都知道容易出错的脚本，尤其是在大量脚本运行的环境中。它延迟加载滚动图像，因此如果用户没有滚动到浏览器中的某个位置，所有图像都不会被加载。它不依赖任何外部依赖，因此不需要框架或插件。3 Lozad.js
延迟加载图像的一个快速简单的替代方法是让JS library为您完成大部分工作。
Lozad是一个纯JavaScript的高性能、轻量级和可配置的延迟加载器，没有依赖性。你可以用它来延迟加载图片、视频、iframe等。并使用交叉点观察器API。
您可以将Lozad包含在npm/Yarn中，并使用您选择的模块绑定器导入它：
npm安装-保存lozadyarn从“lozad”添加lozadimport lozad或者，您可以使用CDN简单地加载该库，并将其添加到HTML页面底部的脚本标记中：
script= 3359cn.jsdelivr.net/npm/lozad/dist/lozad.min.js/script接下来，对于基本实现，将类lozad添加到标记的资源中：
Img data-src=img.jpg 最后，在JS文档中实例化Lozad:
const observer=lozad()；observer . observer()；你会在lozad github repository上找到如何使用这个库的所有细节。
如果您不想深入了解交叉点观察器API的工作原理，或者您只是在寻找各种内容类型的快速实现，那么Lozad是一个不错的选择。
只是，请注意浏览器支持，最后把这个库和交集观察者API的polyfill整合起来。
4延迟加载，模糊图像效果
如果你是一个中等水平的读者，你一定注意到了网站是如何加载帖子中的主要图片的。
你首先看到的是图像的一个模糊的低分辨率副本，而它的高分辨率版本正在被延迟，媒体网站上的高分辨率延迟了图像的加载。
你可以用很多方法使用这个有趣的模糊效果来延迟加载图像。
我最喜欢的技巧是克雷格巴克勒。以下是该解决方案的所有优势：
性能：只有463字节的CSS和1007字节的精简JavaScript代码支持retina屏幕独立：不需要jQuery或其他库和框架逐步增强来抵消旧浏览器和JavaScript5 Yall.js的失败
Yall是一个功能丰富的延迟加载脚本，适用于图像、视频和iframe。更具体地说，它使用交叉点观察器API，并在必要时巧妙地依赖传统的事件处理程序技术。
当Yall包含在文档中时，需要按如下方式进行初始化：
script src= yall . min . js /script script document . addevent listener( DOMContentLoaded ，yall)；/script接下来，要延迟加载一个简单的img元素，您需要在标记中做的是：
img= placeholder . jpg data-src= image-to-lazy-load . jpg alt=描述图像的可选文本请注意以下几点：
您添加的类的惰性元素值src是一个占位符图像。要延迟的图像的路径在data-src属性中。Yall的优势包括：
交叉点观察器API有着出色的性能，梦幻般的浏览器支持(可以追溯到IE11)，不需要其他依赖。这就是这篇关于延迟加载图片对网站性能影响的五种技巧(总结)。有关延迟加载图像的更多信息，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。