想找做海报的超清图片去哪个网站找,ps详情页模板,游戏页面,wordpress手机端菜单作为网页内容的一部分#xff0c;图像和视频通常要消耗很多资源加载。要提高网页应用的性能#xff0c;如何避免资源浪费在加载图像和视频上就很重要了。但是#xff0c;很多时候我们都不愿意减少网页上的媒体资源#xff0c;所以我们经常无从下手。幸运的是#xff0c;我…作为网页内容的一部分图像和视频通常要消耗很多资源加载。要提高网页应用的性能如何避免资源浪费在加载图像和视频上就很重要了。但是很多时候我们都不愿意减少网页上的媒体资源所以我们经常无从下手。幸运的是我们有懒加载这个绝招它可以帮助我们减少加载时间和降低负载而不在内容上偷工减料。什么是懒加载懒加载是一种在页面加载时延迟加载一些非关键资源的技术换句话说就是按需加载。对于图片来说非关键通常意味着离屏。如果你有使用过Lighthouse并且做过一些性能调优你可能已经见过一些离屏图片的应用。(offscreen-images)我们之前看到的懒加载一般是这样的形式浏览一个网页准备往下拖动滚动条拖动一个占位图片到视窗占位图片被瞬间替换成最终的图片我们可以在Medium中看到懒加载是如何使用的网页首先用一张轻量级的图片占位当占位图片被拖动到视窗瞬间加载目标图片然后替换占位图片。如果你不是很熟悉懒加载技术你或许会疑问它有什么用能为我们带来什么好处下面我们将会探讨这个问题。为什么要懒加载而不直接加载浪费流量。在不计流量收费的网络这可能不重要在按流量收费的网络中毫无疑问一次性加载大量图片就是在浪费用户的钱。消耗额外的电量和其他的系统资源并且延长了浏览器解析的时间。因为媒体资源在被下载完成后浏览器必须对它进行解码然后渲染在视窗上这些操作都需要一定的时间。懒加载图片和视频可以减少页面加载的时间、页面的大小和降低系统资源的占用这些对于性能都有显著地提升。在这里我们将会提到一些懒加载技术和使用方法还有一些常用的懒加载库。懒加载图片图片懒加载在技术上实现很简单不过对于细节要求比较严格。目前有很多实现懒加载的方法先从懒加载内联图片说起吧。内联图片最常见的懒加载方式就是利用标签。懒加载图片时我们利用JavaScript检查标签是否在视窗中。如果在的src(有时候是srcset)就会设置为目标图片的url。利用intersection observer如果你之前用过懒加载你很可能是通过监听一些事件比如scroll或者resize来检测元素出现在视窗这种方法很成熟能够兼容大部分的浏览器。但是现代浏览器提供了一个更好的方法给我们(the intersection observer API)注意Intersection observer目前只能在Chrome63和firefox58使用比起事件监听Intersection observer用起来比较简单可阅读性也大大提高。开发者只需要注册一个observer去监控元素而不是写一大堆乱七八糟的视窗检测代码。注册observer之后我们只需要做的就是当元素可见时改变它的行为。举个例子吧需要注意三个相关的属性class用于在JavaScript中关联元素src属性指向了一张占位图片图片在页面的第一次加载会显现data-src和data-srcset属性这是占位属性里面放的是目标图片的urlok看一下怎么在JavaScript中使用Intersection observer吧document.addEventListener(DOMContentLoaded, function() {var lazyImages [].slice.call(document.querySelectorAll(img.lazy));if (IntersectionObserver in window) {let lazyImageObserver new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {let lazyImage entry.target;lazyImage.src lazyImage.dataset.src;lazyImage.srcset lazyImage.dataset.srcset;lazyImage.classList.remove(lazy);lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {// Possibly fall back to a more compatible method here}});当DOMContentLoaded触发后js会查询class为lazy的img元素。然后我们检测浏览器支不支持intersection observer如果可以用先创建一个observer然后传入回调函数回调函数将会在元素可见性变化时被调用。具体的代码可以在这里查看。最后比较麻烦的是处理兼容性在不支持intersection observer的浏览器你需要引入polyfill或者回退到更安全的方法。利用事件当你选择使用intersection observer来实现懒加载时你要考虑它的兼容性当然你可以使用polyfill实际上这也非常简单。事实上你也可以针对低版本的浏览器使用事件来完成更安全地回退。你可以使用scroll、resize和orientationchange事件再配合getBoundingClientRectAPI就可以实现懒加载了。和上面一样的例子现在JavaScript程序变成了这样document.addEventListener(DOMContentLoaded, function() {let lazyImages [].slice.call(document.querySelectorAll(img.lazy));let active false;const lazyLoad function() {if (active false) {active true;setTimeout(function() {lazyImages.forEach(function(lazyImage) {if ((lazyImage.getBoundingClientRect().top window.innerHeight lazyImage.getBoundingClientRect().bottom 0) getComputedStyle(lazyImage).display ! none) {lazyImage.src lazyImage.dataset.src;lazyImage.srcset lazyImage.dataset.srcset;lazyImage.classList.remove(lazy);lazyImages lazyImages.filter(function(image) {return image ! lazyImage;});if (lazyImages.length 0) {document.removeEventListener(scroll, lazyLoad);window.removeEventListener(resize, lazyLoad);window.removeEventListener(orientationchange, lazyLoad);}}});active false;}, 200);}};document.addEventListener(scroll, lazyLoad);window.addEventListener(resize, lazyLoad);window.addEventListener(orientationchange, lazyLoad);});上面的代码用了getBoundingClientRect在scroll事件中检测img是否在视窗。setTimeout用于延迟执行操作active变量代表了处理状态防止同时响应。当图片被懒加载完成后事件处理程序将被移除具体请看这里。尽管上面这段代码可以在绝大部分的浏览器上运行但存在显著的性能损耗。在此示例中无论在视口中是否存在图像文档滚动或窗口大小调整时都会每200毫秒执行一次检查。 另外跟踪有多少元素留给延迟加载和解除事件处理程序的繁琐工作也留给了开发者。建议尽可能使用intersection observer如果应用要求兼容低版本的浏览器才考虑利用事件CSS图像展示图像不是标签的特权CSS利用background-image也可以做到。相比较而言CSS加载图片比较容易控制。当文档对象模型、CSS对象模型和渲染树被构造完成后开始请求外部资源之前浏览器会检测CSS规则是怎么应用到DOM上的。如果浏览器检测到CSS引用的外部资源并没有应用到已存在的DOM节点上浏览器就不会请求这些资源。这个行为可用于延迟CSS图片资源的加载思路是通过JavaScript检测到元素处于视窗中时加一个class类名这个class就引用了外部图片资源。这可以实现图片按需加载而不是一次性全部加载。给个例子Heres a hero heading to get your attention!Heres hero copy to convince you to buy a thing!Buy a thing!这个div.lazy-background元素会正常地显示CSS规则加载的占位图片。当元素处于可见状态时我们可以添加一个类名完成懒加载.lazy-background {background-image: url(hero-placeholder.jpg); /* 占位图片 */}.lazy-background.visible {background-image: url(hero.jpg); /* 真正的图片 */}下面是利用JavaScript去检测元素是否处于视窗(intersection observer)如果可见就为它加上一个visible的类名。document.addEventListener(DOMContentLoaded, function() {var lazyBackgrounds [].slice.call(document.querySelectorAll(.lazy-background));if (IntersectionObserver in window) {let lazyBackgroundObserver new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {entry.target.classList.add(visible);lazyBackgroundObserver.unobserve(entry.target);}});});lazyBackgrounds.forEach(function(lazyBackground) {lazyBackgroundObserver.observe(lazyBackground);});}});懒加载视频就像图片一样我们同样可以懒加载视频播放视频会用到标签。如何懒加载视频取决于特定的场景先来讨论几个需要不同解决方案的场景。视频不需要自动播放我们还需要添加一个poster属性给标签这相当于一个占位符。preload属性则规定是否在页面加载后载入视频。鉴于浏览器之间的preload默认值差异显式定义会更具兼容性。在这种情况下当用户点击播放视频时视频才会被加载预加载视频简单地实现了。不幸的是当我们想用视频替代GIF动画时这个方法就行不通了。用视频模拟GIFGIF在很多地方都不及视频特别是文件大小方面。在相同质量下视频的尺寸通常会比GIF文件小得多。当然利用视频取代GIF并不是直接用标签取代标签那么简单。因为GIF图片有三种要注意的行为加载完后自动播放不停地循环播放没有音轨要实现这些HTML是这样的autoplay、muted和loop的作用是为了实现上述三个功能playsinline是为了兼容IOS的autoplay。现在我们已经有了一个跨平台的视频模版用于取代GIF图片了。接下来怎么进行懒加载呢Chrome会帮我们自动完成这项工作但你不能保证所有浏览器都能做到这个。所以还是动手实现一下吧。首先修改标签的属性注意到了吗有一个奇怪的poster属性。这个属性其实是一个占位符在被懒加载之前poster里面指定的内容会在标签中显现。和之前的图片懒加载一样我们指定真正的video url藏于每个的data-src中。下一步JavaScript程序该出场了document.addEventListener(DOMContentLoaded, function() {var lazyVideos [].slice.call(document.querySelectorAll(video.lazy));if (IntersectionObserver in window) {var lazyVideoObserver new IntersectionObserver(function(entries, observer) {entries.forEach(function(video) {if (video.isIntersecting) {for (var source in video.target.children) {var videoSource video.target.children[source];if (typeof videoSource.tagName string videoSource.tagName SOURCE) {videoSource.src videoSource.dataset.src;}}video.target.load();video.target.classList.remove(lazy);lazyVideoObserver.unobserve(video.target);}});});lazyVideos.forEach(function(lazyVideo) {lazyVideoObserver.observe(lazyVideo);});}});当懒加载一个视频的时首先要迭代标签里面的每一个然后将data-src中的url分配给src属性。然后调用元素的load方法现在视频就可以自动播放了。通过这个方法我们有了一个模拟GIF动画的视频解决方案不会消耗带宽加载不必要的媒体资源而且还能实现懒加载。懒加载库如果你不关心懒加载背后是如何实现的你只是想找一个库去实现这个功能可供选择的有lazysizes 是一个功能十分强大的懒加载库主要用于加载图片和iframes。你只需要指定data-src/data-srcset属性lazysizes会帮你自动懒加载内容。值得注意的是lazysizes基于intersection observer因此你需要一个polyfill。你还可以通过一些插件扩展库的功能以用于懒加载视频。lozad.js是一个轻量级、高性能的懒加载库基于intersection observer你同样需要提供一个相关的polyfill。blazy是一个轻量级的懒加载库大小仅为1.4KB。相对于lazysizes它不需要任何的外部依赖并且兼容IE7。你可能猜测到了blazy不支持intersection observer性能相对较差。yall.js是作者本人写的一个懒加载库基于IntersectionObserver和事件兼容IE11和大部分的浏览器。如果你想寻找一个基于React的懒加载工具react-lazyload可能是你的选择。上述每个懒加载库的文档都写得很好同时提供了大量的标记模式。如果你不想深究懒加载的技术细节就选择任意一个去使用这能节省你很多的时间和功夫。容易出错的地方看到有那么多的库可以实现懒加载你可能会以为这是一项很轻松的工作。但是懒加载一旦出现错误会导致意想不到的后果。为了避免出错下面的建议你最好熟读于心布局偏移和占位符如果你没有使用占位符懒加载会导致页面布局的偏移。除了让用户感到困惑之外还会导致不必要的浏览器reflow性能大幅下降。因此你至少也要使用一张固定的图片填充img标签或者使用像LQIP和SQIP这样的技术在加载之前提示媒体资源的内容。对于标签src属性初始化应该指向一张占位图片最终会被替换成目标图片。对于可以使用poster属性指定占位符。除此之外对于和来说显式声明其width和height属性都是十分必要的这可以保证从占位符切换到目标资源的过程中不会导致浏览器reflow。延迟图片解码用JavaScript加载一些比较大的图片会阻塞线程导致网页短暂地失去交互能力。如果你不乐意这样的情况出现用decode方法异步解码图片是一个很好的选择这可以避免阻塞线程下面展示一下例子var newImage new Image();newImage.src my-awesome-image.jpg;if (decode in newImage) {// Fancy decoding logicnewImage.decode().then(function() {imageContainer.appendChild(newImage);});} else {// Regular image loadimageContainer.appendChild(newImage);}上面的代码主要是用了Image.decode()方法具体的请看清这里(this CodePen link)。如果你的图片不是太大可以选择直接同步加载。加载失败有时候媒体资源会加载失败假象有这种情况一个网页设置了HTML短时间的缓存(大概5分钟)然后用户打开了一个tab几小时后再浏览这个网页。在这个过程的某个时间缓存会重新部署基于hash的版本号会改变或者丢失。如果这时候懒加载图片会导致失败。虽然这种情况有点极端但你必须要有策略来应对图片加载失败这种状况。比如你可以用一个按钮代替图片填充用户可以点击这个按钮重新加载图片或者提示用户发生了错误。无论多小概率的错误可能会出现所以说不管怎样及时提示用户网页加载错误或者提供一个重新加载的按钮总是值得的。总结懒加载可以减少页面加载的时间、降低页面负载。在用户浏览的时候网页不会加载那些用户看不到的内容但如果用户愿意用户依然可以正常地浏览这些内容。就改进性能方面懒加载是无可争议的合理的一项技术。如果网页应用中出现了大量的图片懒加载可以完美地限制不必要的加载对于用户体验这是巨大的提升相信我你的用户和老板会感谢你的。水平有限翻译得不好的地方请见谅看到错误请在留言反馈谢谢
