npm 包 ember-picturefill 使用教程

在现代网页设计中，响应式图片是一个很重要的特性。然而，浏览器对于响应式图片的支持并不一致，对于一些老旧的浏览器我们需要借助 JavaScript 库来解决这个问题。

ember-picturefill 是一个专门用于 Ember.js 程序中使用 picturefill 库的 npm 包，可以在 Ember.js 应用中轻松实现响应式图片。

安装

在你的 Ember.js 应用目录下使用 npm 安装 ember-picturefill 包。

npm install ember-picturefill --save

使用

在控制器中使用

首先，让我们在控制器中使用 ember-picturefill。在你的控制器中导入 ember-picturefill：

import emberPicturefill from 'ember-picturefill';

然后，我们可以在 “didInsertElement” 钩子函数中来启动 picturefill：

import Controller from '@ember/controller';
import emberPicturefill from 'ember-picturefill';

export default Controller.extend({
  didInsertElement() {
    emberPicturefill();
  }
});

然后，在模板中，我们可以使用 HTML5 “picture” 元素来构建我们的响应式图片：

<picture>
  <source srcset="small.jpg" media="(max-width: 768px)">
  <source srcset="medium.jpg" media="(max-width: 1024px)">
  <source srcset="large.jpg">
  <img src="fallback.jpg" alt="Responsive image">
</picture>

在组件中使用

如果你想在某个组件中使用 ember-picturefill，你可以在组件的 js 文件中导入 ember-picturefill:

import emberPicturefill from 'ember-picturefill';

然后在组件的 “didInsertElement” 钩子函数中使用：

import Component from '@ember/component';
import emberPicturefill from 'ember-picturefill';

export default Component.extend({
  didInsertElement() {
    emberPicturefill();
  }
});

然后，在模板中仍然使用 HTML5 “picture” 元素构建响应式图片。

Ember CLI 插件

ember-picturefill 还支持使用 Ember CLI 插件的方式来集成到你的项目中。

使用 Ember CLI 插件来安装 ember-picturefill:

ember install ember-picturefill

高级用法

图片延迟加载

另一个很重要的特性是延迟加载图片。我们可以使用 ember-picturefill 的 loadImages() 方法来实现图片延迟加载。

首先，在控制器或组件的 js 文件中导入 loadImages() 方法：

import { loadImages } from 'ember-picturefill';

然后在钩子函数 “didInsertElement” 中调用 loadImages() 方法：

didInsertElement() {
  emberPicturefill();

  // 将参数设置为 'lazy' 来启用延迟加载
  loadImages('lazy');
}

最后，在模板中，我们可以添加属性 “data-src” 代替 “src” 来实现延迟加载。

<picture>
  <source data-srcset="small.jpg" media="(max-width: 768px)">
  <source data-srcset="medium.jpg" media="(max-width: 1024px)">
  <source data-srcset="large.jpg">
  <img data-src="fallback.jpg" alt="Responsive image">
</picture>

图片懒加载

使用 picturefill 来实现图片懒加载也是很方便的，我们可以使用 Ember.js 的事件来实现图片的加载。

首先，在控制器或组件的 js 文件中导入 picturefill:

import emberPicturefill from 'ember-picturefill';

然后，在钩子函数 “didInsertElement” 中，使用 Ember.js 的 scroll 事件来监听页面的滚动：

didInsertElement() {
  emberPicturefill();

  window.addEventListener('scroll', () => {
    // 使用 scroll 事件来监听页面滚动
    emberPicturefill({ elements: '[data-element="lazy"]' });
  });
}

最后，在模板中，我们可以添加属性 “data-element” 来实现图片懒加载。

<picture>
  <source data-srcset="small.jpg" media="(max-width: 768px)">
  <source data-srcset="medium.jpg" media="(max-width: 1024px)">
  <source data-srcset="large.jpg">
  <img data-element="lazy" data-src="fallback.jpg" alt="Responsive image">
</picture>

显示埋点

最后我们介绍一种使用 picturefill 来显示埋点的方案。我们可以通过使用 “img.onerror” 的事件来替代 “img.onload” 的渲染方式，来实现显示埋点。

首先，在控制器或组件的 js 文件中导入 ember-picturefill:

import emberPicturefill from 'ember-picturefill';

然后，在钩子函数 “didInsertElement” 中使用 “img.onerror” 事件来替代 “img.onload”：

-- -------------------- ---- -------
------------------ -
  -------------------

  ----- ------ - ---------------------------------

  ------------------------------------ ------- -- -
    -- ----- ------------- ----- ------------
    ------------- - -- -- -
      ----- --- - --- --------
      ------- - ----------
      ---------- - -- -- -
        -- - --- --------------
        -------------------------------
        --------------------------------
      --
    --
  ---
-

最后，在模板中使用 “onerror” 属性来实现显示埋点。

<picture>
  <source srcset="small.jpg" media="(max-width: 768px)">
  <source srcset="medium.jpg" media="(max-width: 1024px)">
  <source srcset="large.jpg">
  <img src="fallback.jpg" alt="Responsive image" onerror="load()">
</picture>

结论

我们在本文中介绍了如何安装和使用 ember-picturefill 包，以及一些高级用法来实现图片延迟加载、图片懒加载和显示埋点。

使用 ember-picturefill 包可以方便地在 Ember.js 应用中实现响应式图片，提高网站的用户体验和性能。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca8d