썸네일에 들어가는 gif 멈추게하는 스크립트 채택완료

</p>

<p><button>

   Stop Animations

</button>

<p>

    A load of body text, blah blah blah

</p>

<img src="<a href="https://media.tenor.com/vxJjiiRh3CUAAAAd/%EC%B6%98%EC%8B%9D-%EC%B6%98%EC%8B%9D%EC%9D%B4.gif"" target="_blank" rel="noopener noreferrer">https://media.tenor.com/vxJjiiRh3CUAAAAd/%EC%B6%98%EC%8B%9D-%EC%B6%98%EC%8B%9D%EC%9D%B4.gif"</a> alt=""/></p>

<p>

<script>

 var stopAnim = (function () {

                var priv = {};

                var pub = {};

                priv.pauseAll = false;

                if(window.matchMedia){

                    var mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");

                    if (!mediaQuery || mediaQuery.matches) { priv.pauseAll = true }

                }

                

                priv.stopAnim = function (img) {

                    var coverImage = function () {

                       setTimeout(function(){

                        var width = img.width;

                        var height = img.height;

                        var canvas = document.createElement('canvas');

                        canvas.width = width;

                        canvas.height = height;

                        canvas.getContext('2d').drawImage(img, 0, 0, width, height);

                        canvas.style.position = 'absolute';

                        canvas.setAttribute('aria-hidden', 'true');

                        canvas.setAttribute('role', 'presentation');

                        var parent = img.parentNode;

                        parent.insertBefore(canvas, img);

                        img.style.opacity = 0.01;

                        }, 250);

                    };</p>

<p>                    if (img.complete) {

                        coverImage();

                    } else {

                        img.addEventListener('load', coverImage, true);

                    }

                }</p>

<p>                pub.freezeAll = function () {

                    //var images = document.querySelectorAll('.crayons-article__header img, .crayons-article__main img, .crayons-avatar img');

                    var images = document.querySelectorAll('img');

                    

                    for (x = 0; x < images.length; x++) {

                        priv.stopAnim(images[x]);

                    }

                };</p>

<p>                if (priv.pauseAll == true) {

                    pub.freezeAll();

                }</p>

<p>                return pub;

            })();

            

            

         

var btn = document.querySelector('button');       

         

btn.addEventListener('click', function(){

    stopAnim.freezeAll();

})

</script></p>

<p>