网站性能延迟加载图像的五种技巧指南教程_技巧小白入门

网站性能延迟加载图像的五种技巧指南教程

由于图片是web上最流行的内容类型之一,因此网站的页面加载时间很容易成为一个问题。

网站性能延迟加载图像的五种技巧指南教程_技巧小白入门

即使经过适当的优化,图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能,它们会失去耐心,转向其他地方,除非你能想出一个不影响速度感知的图像加载解决方案。

在本文中,您将学习有关延迟加载图像的五种方法,您可以将这些方法添加到web优化工具包中,以改进站点上的用户体验。

什么是延迟加载?

延迟加载图像意味着在网站上异步加载图像——也就是说,在网站上面的折叠内容完全加载之后,甚至仅当它们出现在浏览器的视区中时,才有条件地加载它们。这意味着,如果用户不一直向下滚动,那么放在页面底部的图像甚至不会被加载。

许多网站都使用这种方法,但在图片密集的网站上尤其明显。尝试浏览你最喜欢的在线搜索网站,寻找高分辨率的照片,你很快就会意识到网站只加载有限数量的图片。当您向下滚动页面时,您将看到占位符图像快速填充真实图像以供预览。例如,请注意unsplash.com上的加载程序:将页面的该部分滚动到视图中会触发使用全分辨率照片替换占位符:

为什么要关心延迟加载图像?

至少有两个很好的理由可以让你考虑延迟的为你的网站加载图像:

● 如果您的网站使用JavaScript来显示内容或向用户提供某种功能,那么加载DOM很快就变得至关重要。脚本在开始运行之前,通常要等到DOM完全加载之后才开始运行。在有大量图像的站点上,延迟加载-或异步加载图像-可能会在用户停留或离开您的站点之间产生差异。

● 由于大多数延迟加载解决方案只在用户滚动到在视区中可以看到图像的位置时加载图像,因此如果用户从未到达该点,则永远不会加载这些图像。这意味着节省了大量的带宽,大多数用户,尤其是那些在移动设备和慢速连接上访问网络的用户,都会感谢您。

嗯,延迟加载图像有助于网站性能,但最好的方法是什么?

没有完美的方式。

如果您使用JavaScript,那么实现您自己的延迟加载解决方案应该不成问题。没有什么比自己编写代码更能让你控制了。

或者,您可以浏览web,寻找可行的方法,并开始使用它们。我就是这么做的,然后遇到了这五个有趣的技巧。

#1使用Intersection Observer API进行延迟加载

Intersection Observer API是一个现代化的界面,你可以利用它来延迟加载图像和其他内容。

下面介绍MDN如何引入此API:

换句话说,异步观察的是一个元素与另一个元素的交集。

Denys Mishunov在交叉观察者和使用它的延迟加载图像上都有很棒的教程。这是他的解决方案的样子。

假设您想懒得加载图片库。每个图像的标记如下所示:

<img data-src="image.jpg" alt="test image">

注意图像的路径如何包含在data-src属性内,而不是src属性中。原因是使用src意味着图像会立即加载,这不是你想要的。

在CSS中,您可以为每个图像赋予一个min-height值100px。这为每个图像占位符(没有src属性的img元素)提供了垂直维度。

img {
  min-height: 100px;
  ...more styles here
}

在JavaScript文档中,然后创建一个配置对象,并将其注册到一个intersectionObserver实例中:

// create config object: rootMargin and threshold
// are two properties exposed by the interface
const config = {
  rootMargin: '0px 0px 50px 0px',
  threshold: 0
};

// register the config object with an instance
// of intersectionObserver
let observer = new intersectionObserver(function(entries, self) {
  // iterate over each entry
  entries.forEach(entry => {
    // process just the images that are intersecting.
    // isIntersecting is a property exposed by the interface
    if(entry.isIntersecting) {
      // custom function that copies the path to the img
      // from data-src to src
      preloadImage(entry.target);
      // the image is now in place, stop watching
      self.unobserve(entry.target);
    }
  });
}, config);

最后,迭代所有图像并将它们添加到此iterationObserver实例:

const imgs = document.querySelectorAll('[data-src]');
imgs.forEach(img => {
  observer.observe(img);
});

这个解决方案的优点是:实现起来很容易,很有效,并且让intersectionObserver在计算方面做大量的工作。

另一方面,虽然大多数浏览器的最新版本都支持交集观察器API,但并不是所有浏览器都一致支持它。幸运的是,有一个polyfill可用。

#2 Robin Osborne逐步增强的延迟加载

罗宾·奥斯本提出了一个基于渐进增强的超级巧妙的解决方案。在这种情况下,使用JavaScript实现的延迟加载本身被认为是对常规HTML和CSS的增强。

渐进增强的原因吗?那么,如果使用基于JavaScript的解决方案显示图像,如果禁用JavaScript或发生错误阻止脚本正常工作,会发生什么情况呢?在这种情况下,如果没有渐进的增强,用户很可能根本看不到图像。不酷。

您可以在此Pen中查看Osborne解决方案的基本版本的详细信息;在另一个Pen中,你可以看到一个更全面的解决方案,其中考虑了破坏JavaScript的情况。

这种技术有许多优点:

● 渐进增强方法可确保用户始终可以访问内容。

● 它不仅适用于JavaScript不可用的情况,而且还适用于JavaScript 崩溃的情况:我们都知道容易出错的脚本,特别是在运行大量脚本的环境中。

● 它延迟加载滚动图像,因此如果用户不滚动到浏览器中的位置,则不会加载所有图像。

● 它不依赖于任何外部依赖,因此不需要框架或插件。

#3 Lozad.js

实现延迟加载图像的一种快速简便的替代方法是让JS库为您完成大部分工作。

Lozad是纯JavaScript中高性能,轻量级和可配置的延迟加载器,没有依赖关系。您可以使用它来延迟加载图像,视频,iframe等,并使用Intersection Observer API。

您可以使用npm / Yarn包含Lozad并使用您选择的模块捆绑器导入它:

npm install --save lozad

yarn add lozad
import lozad from 'lozad';

或者,您可以使用CDN简单地加载库,并将其添加到<script>标签中HTML页面的底部:

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

接下来,对于基本实现,将类lozad添加到标记中的资源:

<img data-src="img.jpg">

最后,在JS文档中实例化Lozad:

const observer = lozad();
observer.observe();

您将找到如何使用lozad github存储库上的库的所有详细信息。

如果您不想深入了解Intersection Observer API的工作方式,或者您只是在寻找适用于各种内容类型的快速实现,那么Lozad是一个很好的选择。

只有,请注意浏览器支持,并最终将此库与Intersection Observer API的polyfill集成。

#4延迟加载,模糊图像效果

如果你是一个中等水平的读者,你肯定已经注意到网站是如何在帖子中加载主图片的。

您首先看到的是图像的模糊、低分辨率副本,而它的高分辨率版本正被延迟加载,媒体网站上的高分辨率,延迟加载图像。

您可以通过多种方式使用这种有趣的模糊效果来延迟加载图像。

我最喜欢的技术是Craig Buckler。以下是此解决方案的所有优点:

● 性能:只有463个字节的CSS和1,007个字节的缩小JavaScript代码

● 支持视网膜屏幕

● 无依赖性:不需要jQuery或其他库和框架

● 逐步增强以抵消旧版浏览器和JavaScript失败

#5 Yall.js

Yall是一个功能丰富的延迟加载脚本,适用于图像,视频和iframe。更具体地说,它使用了Intersection Observer API,并在必要时巧妙地依靠传统的事件处理程序技术。

在文档中包含Yall时,需要按如下方式对其进行初始化:

<script src="yall.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", yall);
</script>

接下来,要延迟加载一个简单img元素,您需要在标记中执行的操作是:

<img src="placeholder.jpg" data-src="image-to-lazy-load.jpg" alt="Alternative text to describe image.">

请注意以下事项:

● 您添加类慵懒的元素

● 值src是占位符图像

● 要延迟加载的图像的路径位于data-src属性内。

Yall的好处包括:

● Intersection Observer API具有出色的性能

● 神奇的浏览器支持(它可以追溯到IE11)

● 没有必要的其他依赖。

海计划公众号
(0)
上一篇 2020/03/20 04:05
下一篇 2020/03/20 04:04

您可能感兴趣的内容

  • Sass 嵌套入门知识_Sass小白教程

    嵌套规则Sass 允许我们将以与html相同的方式嵌套css选择器,将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,比如: // .scss语法#main {width: 97%;p, div {font-size: 2em;a { font-weight: bold; }}pre { font-size: 3em; }

    2020/03/23
  • vue-next 响应式原理菜鸟教程网_原理指南教程

    写在前面最新 vue-next 的源码发布了,虽然是 pre-alpha 版本,但这时候其实是阅读源码的比较好的时机。在 vue 中,比较重要的东西当然要数它的响应式系统,在之前的版本中,已经有若干篇文章对它的响应式原理和实现进行了介绍,这里就不赘述了。在 vue-next 中,其实现原理和之前还是相同的,即通过观察者模式和数据劫持,只不过对其实现方式进行了

    2020/03/29
  • 高性能Javascript总结指南教程_性能基础入门

    一、加载和运行Javascript代码执行会阻塞其他浏览器处理过程、充分利用webpack或gulp工具对文件打包压缩,减少js文件的数量,从而减少http请求的次数,以提高网页应用的实际性能。二、数据访问 经典计算机科学的一个问题是确定数据应当存放在什么地方、以实现最佳的读写效率。数据存储在哪里会关系到代码运行期间数据被检索到的速度。JS中的四

    2020/04/05
  • js实现无限瀑布流菜鸟指南_瀑布流基础入门

    瀑布流是一种常见的网页布局方式,在许多网站中我们都能看到“瀑布流”的效果,其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布,故将这种布局方式称为瀑布流。生活中瀑布流实例:花瓣网在css中我们学习过使用Multi-columns来实现瀑布流的效果,通过 Multi-columns 相关的属性 column-count、colum

    2020/03/24
  • Raphael.js小白攻略_通过SVG/VML+JS实现跨浏览器的矢量图形实现方案

    Raphael.js使用帮助 官方网址:http://www.raphaeljs.com/ GitHub:https://github.com/DmitryBaranovskiy/…

    2020/03/06
  • 关于PHP程序员技术职业生涯规划小白入门_职业小白攻略

    看到很多PHP程序员职业规划的文章,都是直接上来就提Linux、PHP、MySQL、Nginx、Redis、Memcache、jQuery这些,然后就直接上手搭环境、做项目,中级就是学习各种PHP框架和类库,高级阶段就是MySQL优化、PHP内核与扩展、架构设计这些了。这些文章都存在一个严重的缺陷,不重视基础。就好比练武功,只求速成,不修炼内功和心法,只练各

    2020/03/31
  • bootstrap基础入门教程_最流行的HTML,CSS和JavaScript框架,用于开发响应式,移动端先行的web项目

    bootstrap基础入门 官方网址:http://getbootstrap.com/ GitHub:https://github.com/twbs/bootstrap 简介描述:…

    2020/03/05
  • RSSHub使用帮助_一个轻量、易于扩展的 RSS 生成器

    RSSHub使用帮助 官方网址:https://docs.rsshub.app/ GitHub:https://github.com/DIYgod/RSSHub 简介描述:一个轻量…

    2020/03/07
  • w3cvip小白知识一个具有专业性、前瞻性、综合性的前端技术社区

    w3cvip基础入门 官方网址:https://www.w3cvip.org/ 简介描述:一个具有专业性、前瞻性、综合性的前端技术社区 w3c社区是一个具有专业性、前瞻性、综合性的…

    2020/03/05
  • 前端框架选型入门百科_框架入门百科

    前面的话有一个流传较广的笑话,一个人在stackoverflow中提了一个问题,如何使用javascript实现一个数字与另外一个数字相加。最高票回答是你应该使用jQuery插件,jQuery插件可以做任何事情。 历史总是在重演,以前是jQuery,现在可能是react或vue。不同的框架有不同的应用场景,杀鸡不要用牛刀。本文将详细介绍框架选型 框架与库库(

    2020/04/03
  • jshint小白知识_静态代码检测工具

    jshint小白知识 官方网址:http://jshint.com GitHub:https://github.com/jshint/jshint 简介描述:静态代码检测工具 JS…

    2020/03/06
  • Vuex与组件通信小白入门_vuex小白知识

    概述Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。也就是说 Vuex 用于单页面应用组件之间的数据共享,在组件嵌套很多层的情况下,Vue 中父子组件的通信过程就变得很麻烦,此时使用 Vuex 方便了组件间的通信。vuex官网上说是一个vue的状态管理工具。其实我们可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关

    2020/03/26
  • JSX在render函数中的应用基础入门_jsx基础入门

    一.JSX简介const element =

    Hello, world!

    ;JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。以下两种示例代码完全等效:con

    2020/03/26
  • 函数式编程术语及示例菜鸟攻略_函数菜鸟教程网

    译者注:本项目译自 functional-programing-jargon,专业术语居多,如有错误,可以提 pr 更正。除了术语翻译,针对每项术语,也有代码示例,位于 /demos 目录下。另外,这里也有几份不错的文章和仓库。 函数式编程有许多优势,由此越来越受欢迎。然而每个编程范式 (paradigm) 都有自己唯一的术语,函数式编程也不例外。我们提供一

    2020/03/29
  • 浅谈前端面试入门百科_面试指南教程

    引言最近组里大佬出差,面试的任务落在了我这个小喽啰身上。作为一位中级工程师,让我面试高级工程师,我也是压力山大,只得硬着头皮上。这几天面试了许许多多人,感慨良多,不吐不快简历简洁统一用pdf,注意排版不要花里胡哨一两页即可,不要把5年前的经历都写上。我基本只关注最近两年内的,毕竟2个月前的代码给你看你都估计不知道自己写的什么了突出重点不要罗列常规需求不要说套

    2020/03/23
  • node怎么做反向代理?使用指南_代理小白知识

    在实际工程开发中,会有前后端分离的需求。使用node.js反向代理的目的:实现前后端分离,前端减少路径请求的所需的路由文件。一. 反向代理的应用场景1. 静态资源与动态资源分离 e.g. 图片服务器2. AJAX跨域访问3. 搭建统一服务网关接口二. 使用node.js实现反向代理1. 安装http-proxy模块npm install http-proxy

    2020/03/22