这篇文章主要讲解了“JavaScript怎么创建一个非自动播放的GIF网络组件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript怎么创建一个非自动播放的GIF网络组件”吧！

这里用的gif是小骆驼和猫的这种可爱互动：

哇，太可爱了！我可以看一天这个

对于这个 Web 组件，我们需要一些东西：

画布（“缩略图”所在的位置）

一张图片（实际的 gif）

标有“gif”的标签

一些造型

让我们这样做：

constnoAutoplayGifTemplate=document.createElement('template')noAutoplayGifTemplate.innerHTML=`<style>.no-autoplay-gif{--size:30px;cursor:pointer;position:relative;}.no-autoplay-gif.gif-label{border:2pxsolid#000;background-color:#fff;border-radius:100%;width:var(--size);height:var(--size);text-align:center;font:boldcalc(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;}</style><divclass="no-autoplay-gif"><canvas/><spanclass="gif-label"aria-hidden="true">GIF</span><imgclass="hidden"></div>

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

classNoAutoplayGifextendsHTMLElement{constructor(){super()//在此处添加设置}loadImage(){//在此处添加渲染}staticgetobservedAttributes(){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 组件：

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

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

<no-autoplay-gifsrc="..."alt="Llamaandcat"/>逻辑

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

classNoAutoplayGifextendsHTMLElement{constructor(){super()//添加shadowDOMthis._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()})}//...}

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

classNoAutoplayGifextendsHTMLElement{//...toggleImage(force=undefined){this.img.classList.toggle('hidden',force)//Weneedtocheckforundefinedvalues,asJSdoesadistinctionhere.//Wecannotsimplynegateagivenforcevalue(i.e.hidingonethingandunhidinganother)//asanundefinedvaluewouldactuallytoggletheimg,but//alwayshidetheothertwo,because!undefined==truethis.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。理论上，我们现在可以这样做：

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

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

classNoAutoplayGifextendsHTMLElement{//...loadImage(){constsrc=this.getAttribute('src')constalt=this.getAttribute('alt')if(!src){console.warn('Asourcegifmustbegiven')return}if(!src.endsWith('.gif')){console.warn('Providedsrcisnota.gif')return}//Morestuff}//...}

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

classNoAutoplayGifextendsHTMLElement{//...loadImage(){//Validationthis.img.onload=event=>{constwidth=event.currentTarget.widthconstheight=event.currentTarget.height//Setwidthandheightoftheentirethingthis.canvas.setAttribute('width',width)this.canvas.setAttribute('height',height)this.container.setAttribute('style',`width:${width}px;height:${height}px;`)//"Draws"thegifontoacanvas,i.e.thefirst//frame,makingitlooklikeathumbnail.this.canvas.getContext('2d').drawImage(this.img,0,0)}//Triggertheloadingthis.img.src=srcthis.img.alt=alt}//...}

感谢各位的阅读，以上就是“JavaScript怎么创建一个非自动播放的GIF网络组件”的内容了，经过本文的学习后，相信大家对JavaScript怎么创建一个非自动播放的GIF网络组件这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！