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

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

QA

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

본문

gif 멈추게하는 스크립트가 있나요?

 

 

이 질문에 댓글 쓰기 :

답변 4


<button>
   Stop Animations
</button>
<p>
    A load of body text, blah blah blah
</p>
<img src="https://media.tenor.com/vxJjiiRh3CUAAAAd/%EC%B6%98%EC%8B%9D-%EC%B6%98%EC%8B%9D%EC%9D%B4.gif" alt=""/>

<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);
                    };
                    if (img.complete) {
                        coverImage();
                    } else {
                        img.addEventListener('load', coverImage, true);
                    }
                }
                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]);
                    }
                };
                if (priv.pauseAll == true) {
                    pub.freezeAll();
                }
                return pub;
            })();
            
            
         
var btn = document.querySelector('button');       
         
btn.addEventListener('click', function(){
    stopAnim.freezeAll();
})
</script>

https://dev.to/grahamthedev/stopping-gif-animations-on-dev-to-for-those-who-prefer-reduced-motion-59pg

개노미님꺼로 하니까 잘 되네요.


<p><a href="#" class="article-body-image-wrapper"><img src="http://minyho.duckdns.org/170228-M-02.gif" alt='person shaking their head side to side wearing white suit - "sassy"' loading="lazy" width="200" height="150" data-animated="true"></a></p>
<script src="https://dev.to/packs/js/runtime~articlePage-31a43a747ab9191e06a0.js" defer="defer"></script>
<script src="https://dev.to/packs/js/0-7e2f02f299313d314059.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/1-791486a819b76753adf9.chunk.js" defer="defer"></script>
<script src="https://dev.to/packs/js/articlePage-608c9ca2bc4ff420cd99.chunk.js" defer="defer"></script>
답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT