vue加载js延迟_Vue.js 2的轻量级可转换图像延迟加载

vue加载js延迟

Vue Clazy负载 (Vue Clazy Load)

Component-based lazy (CLazy) load images in Vue.js 2.

Vue.js 2中基于组件的延迟(CLazy)加载图像。

This component approach swaps slots based on the image's loading state. Thus allowing you to use anything as a preloader, such as component frameworks' spinners and progress bars. Such method also enables transitioning between states, a designer's dream.

此组件方法根据映像的加载状态交换插槽。 因此，您可以将任何东西用作预加载器，例如组件框架的微调器和进度条。 这种方法还可以实现状态之间的转换，这是设计师的梦想。

View demo 查看演示 Download Source 下载源

安装 (Installation)

Select one:

选择一个：

1. Install using npm

   使用npm安装

npm install vue-clazy-load --save

You can omit the --save option if using [email protected]^5.

如果使用[email protected] ^5则可以省略--save选项。

You can also use Yarn (recommended) as:

您还可以将Yarn(推荐)用作：

yarn add vue-clazy-load

Then in your JavaScript file:

然后在您JavaScript文件中：

import VueClazyLoad from 'vue-clazy-load' // ES6 (Babel and others)

- or -

- 要么 -

var VueClazyLoad = require('vue-clazy-load')

1. Embed script tag

   嵌入脚本标签

Locally installed via npm/yarn:

通过npm / yarn本地安装：

<script src="node_modules/vue-clazy-load/dist/vue-clazy-load.min.js"></script>

Or from CDN:

或从CDN：

<script src="https://unpkg.com/vue-clazy-load/dist/vue-clazy-load.min.js"></script>

Lastly, register the component into Vue:

最后，将组件注册到Vue中：

Vue.use(VueClazyLoad)

文献资料 (Documentation)

Using Clazy Load is easy. The HTML code you need is the following:

使用Clazy Load很容易。 您需要HTML代码如下：

<clazy-load src="https://unsplash.it/500">
  <img src="https://unsplash.it/500">
  <div class="preloader" slot="placeholder">
    Loading message
  </div>
</clazy-load>

And no JS code is needed whatsoever, Clazy Load works out of the box.

而且，不需要任何JS代码，Clazy Load即可使用。

道具 (Props)

The component needs some configuration, though. There's only one required option, keeping it pretty simple.

不过，该组件需要一些配置。 只有一个必需的选项，使其非常简单。

Prop	Description	Type	Default
src	Image source that will be loaded.	String	required
tag	What tag the component will render to, like vue-router router-link component.	String	div
element	Selector for IntersectionObserver's root element. Leave blank to use viewport. See below for more details.	String	null
threshold	Values for IntersectionObserver's threshold option. See below for more details.	Array/Number	[0, 0.5, 1]
ratio	Element visibility percentage to compare and trigger loading. Must be between 0 and 1.	Number	0.4
margin	IntersectionObserver's margin option. See original documentation for more details.	String	'0px'

Struts	描述	类型	默认
src	将要加载的图像源。	串	需要
标签	组件将呈现给什么标签，例如vue-router router-link组件。	串	div
元件	IntersectionObserver的根元素的选择器。 保留空白以使用视口 。 请参阅下面的更多细节。	串	null
阈	IntersectionObserver的阈值选项的值。 请参阅下面的更多细节。	数组/编号	[0, 0.5, 1]
比	元素可见性百分比，用于比较和触发加载。 必须介于0和1之间。	数	0.4
保证金	IntersectionObserver的margin选项。 有关更多详细信息，请参见原始文档。	串	'0px'

班级 (Classes)

Custom classes on the Clazy Load component are passed to the rendered output.

Clazy Load组件上的自定义类将传递到呈现的输出。

Also, the component adds loading and loaded classes to the root element regarding the two possible states, enabling further customization with CSS.

而且，该组件将有关两种可能状态的loading和loaded类添加到根元素，从而可以使用CSS进行进一步的自定义。

大事记 (Events)

There is currently one event available for you to listen to on the component.

当前有一个事件可供您在组件上收听。

Event	Description
load	Event emitted when image finishes loading
error	Event emitted if the image fails to load for whatever reason

事件	描述
加载	图像加载完成时发出的事件
错误	如果图像由于任何原因无法加载，则发出事件

子组件和元素 (Sub-components and elements)

The reason the component has a src prop while the <img> does as well is to unbind them and allow you to use whatever you want in the default slot. For instance, a simple case in which you would separate the image from the loader:

该组件同时具有<img>时具有src属性的原因是为了取消绑定它们，并允许您使用default插槽中的任何内容。 例如，在一个简单的情况下，您要将映像与加载程序分开：

<clazy-load src="imgsrc">
  <figure class="image-wrapper">
    <img src="imgsrc">
  </figure>
  <div class="preloader-wrapper" slot="placeholder">
    <preloader-component></preloader-component>
  </div>
</clazy-load>

滚动观看行为 (Scroll watching behavior)

Clazy Load uses the new IntersectionObserver API to watch for element visibility on screen. This way it is not only optimized due to use native browser API, it has no proprietary code or gimmicks watching for scroll and making checks, so it will be easier to maintain.

Clazy Load使用新的IntersectionObserver API来监视屏幕上的元素可见性。 这样，不仅由于使用本机浏览器API进行了优化，而且没有专有代码或头来监视滚动和进行检查，因此易于维护。

The downside is that this API is quite recent, so there still is small browser compatibility. Gladly, Polyfill.io covers this use case, and if you need to support older browsers, such as IE, you can include the following tag in your page:

缺点是此API是最近的，因此浏览器兼容性仍然很小。 很高兴，Polyfill.io涵盖了此用例，如果您需要支持IE等较旧的浏览器，则可以在页面中包含以下标记：

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Or simply add IntersectionObserver to the ?features= query of the URL if already using Polyfill.

或者，如果已经使用Polyfill，则只需将IntersectionObserver添加到URL的?features=查询中即可。

The two configurable props element and threshold are bound to IntersectionObserver. element is used in a document.querySelector to pass the element to the root option, and threshold is used as it is. More details on those two options are available on MDN.

两个可配置的prop element和threshold绑定到IntersectionObserver。 element是在使用document.querySelector到元件传递到root选择，并且threshold被用作它。 有关这两个选项的更多详细信息，请参见MDN。

翻译自: https://vuejsexamples.com/lightweight-transitionable-image-lazy-loading-for-vue-js-2/

vue加载js延迟