Shulou(Shulou.com)06/01 Report--

This article mainly explains "how JavaScript creates a non-automatic GIF network component". The explanation in this article is simple and clear, easy to learn and understand. Please follow the ideas of Xiaobian and study and learn "how JavaScript creates a non-automatic GIF network component" together!

Some lovely test data.

The gif used here is this cute interaction between a camel and a cat:

Wow, so cute! I could watch this all day.

Building Web Components

For this Web component, we need a few things:

Canvas (where Thumbnails are located)

A picture (actual gif)

Labels labeled "gif"

some styling

Let's do this:

const noAutoplayGifTemplate = document.createElement('template')noAutoplayGifTemplate[xss_clean] = `.no-autoplay-gif { --size: 30px; cursor: pointer; position: relative;}.no-autoplay-gif .gif-label { border: 2px solid #000; background-color: #fff; border-radius: 100%; width: var(--size); height: var(--size); text-align: center; font: bold calc(var(--size) * 0.4)/var(--size) sans-serif; position: absolute; top: calc(50% - var(--size) / 2); left: calc(50% - var(--size) / 2);}.no-autoplay-gif .hidden { display: none;} GIF

接下来，我们将创建一个派生自 HTMLElement 的类。 此类稍后将包含播放/停止切换行为。

class NoAutoplayGif extends HTMLElement { constructor() { super() // 在此处添加设置 } loadImage() { // 在此处添加渲染 } static get observedAttributes() { return ['src', 'alt']; } attributeChangedCallback(name, oldVal, newVal) { if (oldVal !== newVal || oldVal === null) { this.loadImage() } }}

这里还有一些样板：一个空的渲染函数，它将加载图像并显示缩略图，以及一个构造函数和一些特定于 Web 组件的方法。

好的，这已经是很多代码了。让我解释。

该loadImage函数不会自动调用，我们需要自己调用。该函数attributeChangedCallback让我们定义当任何指定属性发生observedAttributes变化时会发生什么。在这种情况下：加载图像并显示它。浏览器大致做的是这样的：

遇到 web 组件

调用它的构造函数（调用constructor()）

将其属性一一设置为 DOM 中的设置（因此，src="llama.gif"调用.setAttribute('src', 'llama.gif')

attributeChangedCallback对每个更改的属性执行

签入构造函数时，这些属性一开始是空的，稍后才会填充。如果我们需要一个或多个属性来实际进行渲染，那么如果我们 知道 这些属性不存在，那么调用该loadImage函数是没有意义的。所以我们不在构造函数中调用它，但只有在有可能存在属性时才调用它。**

为了完成样板化，让我们将这个类定义为我们的自定义 Web 组件：

class NoAutoplayGif extends HTMLElement { // ...}window.customElements.define('no-autoplay-gif', NoAutoplayGif)

我们现在可以像这样使用这个组件：

逻辑

有趣的来了。我们需要添加noAutoplayGifTemplate作为组件的shadow DOM。src这已经可以渲染 DOM，但是如果没有andalt属性，我们仍然不能做很多事情。因此我们只从 shadow DOM 中收集一些我们稍后需要的元素，并且已经附加了一个单击侦听器来切换启动/停止模式。

class NoAutoplayGif extends HTMLElement { constructor() { super() // 添加 shadow DOM this._shadowRoot = this.attachShadow({ mode: 'open' }) // 从上面添加模板 this._shadowRoot.appendChild( noAutoplayGifTemplate.content.cloneNode(true) ) // 我们稍后会需要这些 this.canvas = this._shadowRoot.querySelector('canvas') this.img = this._shadowRoot.querySelector('img') this.label = this._shadowRoot.querySelector('.gif-label') this.container = this._shadowRoot.querySelector('.no-autoplay-gif') // 使整个东西可点击 this._shadowRoot.querySelector('.no-autoplay-gif').addEventListener('click', () => { this.toggleImage() }) } // ...}

为了不遇到未定义的方法错误，我们还添加了这三个方法：

class NoAutoplayGif extends HTMLElement { // ... toggleImage(force = undefined) { this.img.classList.toggle('hidden', force) // We need to check for undefined values, as JS does a distinction here. // We cannot simply negate a given force value (i.e. hiding one thing and unhiding another) // as an undefined value would actually toggle the img, but // always hide the other two, because !undefined == true this.canvas.classList.toggle('hidden', force !== undefined ? !force : undefined) this.label.classList.toggle('hidden', force !== undefined ? !force : undefined) } start() { this.toggleImage(false) } stop() { this.toggleImage(true) } // ...}

start/stop 方法允许我们强制启动或强制停止 gif。理论上，我们现在可以这样做：

const gif = document.querySelector('no-autoplay-gif')gif.start()gif.stop()gif.toggleImage()

最后，我们可以添加图片加载部分。让我们先做一些验证：

class NoAutoplayGif extends HTMLElement { // ... loadImage() { const src = this.getAttribute('src') const alt = this.getAttribute('alt') if (!src) { console.warn('A source gif must be given') return } if (!src.endsWith('.gif')) { console.warn('Provided src is not a .gif') return } // More stuff } // ...}

最后一步，我们可以加载图像，设置一些宽度和高度并使用画布：

class NoAutoplayGif extends HTMLElement { // ... loadImage() { // Validation this.img.onload = event => { const width = event.currentTarget.width const height = event.currentTarget.height // Set width and height of the entire thing this.canvas.setAttribute('width', width) this.canvas.setAttribute('height', height) this.container.setAttribute('style', ` width: ${width}px; height: ${height}px; `) // "Draws" the gif onto a canvas, i.e. the first // frame, making it look like a thumbnail. this.canvas.getContext('2d').drawImage(this.img, 0, 0) } // Trigger the loading this.img.src = src this.img.alt = alt } // ...}感谢各位的阅读，以上就是"JavaScript怎么创建一个非自动播放的GIF网络组件"的内容了，经过本文的学习后，相信大家对JavaScript怎么创建一个非自动播放的GIF网络组件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.