dev.to에서 GIF 애니메이션을 일시 중지하여 "단순화된 동작을 좋아하는 사용자를 만족시키십시오.[hack 1]

애니메이션 GIF에 문제가 있을 수 있습니다. 아마도 우리는 그것을 보고 싶지 않은 사람을 위해 그것을 닫는 방법을 찾을 수 있을 것입니다.
경고: 이것은 거의 테스트를 거치지 않아 고장이 발생할 수 있습니다. 이것은'개념증명'입니다. dev.to팀은 완전한 복구를 진행할 때 임시로 복구할 수 있기 때문입니다animated GIFs issue.

컨텐트

Animated GIFs are awesome, why would anyone not want to see a loop of my cat falling off a shelf
 

The Code
 

The Code Explanation
 

A fiddle demonstrating
 

Try it yourself on this page
 

Use it with a bookmarklet
 

Conclusion

애니메이션 GIF가 너무 좋아요. 왜 제 고양이가 선반에서 떨어지는 것을 보고 싶지 않은 사람이 있나요?

나는 너의 고양이 GIF가 매우 웃기다고 믿지만, 어떤 사람들은 애니메이션 GIF가 마음을 분산시키고 심지어 더 고통스럽게 할 것이라고 생각한다.
예를 들어 전정(운동 관련) 장애를 앓고 있는 사람은 자신이 운동으로 불편함을 느끼는 것을 발견할 수 있다.
또는 ADHD와/또는 자폐증을 앓고 있는 사람은 애니메이션 GIF가 당황스럽고 마음을 분산시키는 것을 발견할 수 있다.
혹은 어떤 사람들은 망상증 등을 앓고 있어 동적 이미지에 마음이 불안해질 수도 있다.
애니메이션이 고양이 GIF 등 인터넷을 재미없게 만든다는 다른 조건도 많다.
나는 성인이 아니다. 나는 사람들의 주의를 끌기 위해 애니메이션의 개인 자료 그림을 가지고 있다.
이것은 내가 나의 개인 자료 사진이나 내 게시물에 있는 모든 GIF에게 주의를 분산시킨 사람에게 사과하는 방식이다. 이것은 dev.to 애니메이션 GIF에 대한 해커를 대상으로'해결 방안'을 해독하는 것이다.
dev.to팀/커뮤니티에서 사용 중real fix for the animated GIF issue이지만 복구 과정(테스트/조정 필요)에서 아래 코드를 임시로 사용할 수 있습니다. 이런 복구는 매우 방대하고 시간이 필요하기 때문입니다!

비밀 번호

너희들 중 몇몇에게는 코드만 봐도 충분해...너희들은 나보다 훨씬 똑똑하다!하지만 다른 사람에게는 다음 절에서 작동 원리를 소개합니다!

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 () {
      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.style.top = "0";
      canvas.style.left = "50%";
      canvas.style.transform = "translate(-50%, 0)";
      canvas.setAttribute('aria-hidden', 'true');
      canvas.setAttribute('role', 'presentation');
      var parent = img.parentNode;
      parent.style.position = "relative";
      parent.style.display = "block";
      parent.insertBefore(canvas, img);
      img.style.opacity = 0.01;
    };

    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');

    for (x = 0; x < images.length; x++) {
      priv.stopAnim(images[x]);
    }
  };

  if (priv.pauseAll == true) {
    pub.freezeAll();
  }

  return pub;
})();

해석하다

위의 코드는 그리 복잡하지는 않지만, 어떤 일들은 언뜻 보면 불합리할 수도 있다.

첫걸음

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

먼저, 페이지의 모든 이미지를 수집하고 나중에 일시 중지합니다.
현재 보이는 많은 애니메이션 GIF가 실제로는 애니메이션 webP 이미지이기 때문에 대역폭/파일 크기를 절약할 수 있습니다.
또한 CPU에도 큰 부담이 없기 때문에 모든 이미지를 가져오는 것은 성능에 큰 영향을 미치지 않는다. (물론 게시물 한 편에 100여 개의 이미지가 있는 경우를 제외하고는!)

두 번째 단계

이 함수를 작성하는 목적은 두 가지 방식으로 실행하는 것입니다. 첫 번째 방법은 사용자가 브라우저에서 운동을 줄이는 것을 더 좋아한다는 것을 표시하는 것입니다.

if(window.matchMedia){
    var mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     if (!mediaQuery || mediaQuery.matches) { priv.pauseAll = true }
  }

브라우저 표시 prefers-reduced-motion 미디어 조회는 우리가 검사할 수 있도록 제공됩니다.reduce로 설정하면 설정priv.pauseAll = true을 통해 페이지를 불러올 때 플러그인을 자동으로 활성화합니다.
두 번째 사용 방법은 수시로 전화하는 것이다stopAnim.freezeAll().
이것은 이렇게 설정되어 있기 때문에 사용자가 언제든지 애니메이션을 닫을 수 있도록 단추 이벤트를 추가할 수 있습니다. (나는 그림을 다시 시작할 수 있는 방식으로 그것을 작성하지 않았지만, 필요하면 직접 진행합니다.)

세 번째 단계

우리는 페이지의 모든 그림을 순환해서 훑어보고, 그림을 불러올 때 이벤트 탐지기를 추가합니다.image.completeIE의 예비 버전입니다(네, 이 스크립트는 IE9, 10, 11에서 모두 사용할 수 있습니다! 그렇지 않으면 제가 왜 여기저기 사용해야 합니까var?🤣).
이렇게 하면 GIF가 다음 단계를 진행하기 전에 최소한 액자가 있어야 한다는 것을 확보할 수 있다.

4단계

그림이 불러오면 마법(해커)이 발생하는 곳이다.

측정img

우리는 그림

과 같은 크기의 화포를 만들었다

GIF의 현재 프레임을 가져와 캔버스에 그리기

우리는 패턴 등을 추가하여 화포를 포지셔닝했다(이따가 더 많은 내용이 있을 것이다)

페이지에 캔버스를 추가하고 이미지를 숨깁니다.

4. 포인트/디테일.

그래서 여기서 몇 가지 중요한 일이 생겼어요.
우선, 우리가 화포를 위치를 정할 때, 우리는 그것을 현재 그림의 뒤에 놓는다.이렇게 하면, 이벤트가 그림에 추가되면, 우리는 그것을 속일 필요가 없다.
그런 다음 GIF의 불투명도를 0.001로 설정하여 ChromeVox에 문제가 생겨 계속 사용해야 할지 여부를 결정하지 못했습니다opacity:0.
이렇게 하면 우리의 새 화포가 나타날 수 있지만 GIF는 여전히 화면 리더 앞에 노출된다. (왜냐하면 어떤 사람들은 시력이 있는 화면 리더를 사용해서 이해를 돕기 때문이다.)
이것이 바로 우리가 생성된 이미지에 opacity:0.001와 aria-hidden="true"를 추가해야 하는 이유입니다. 왜냐하면 우리는 접근성 트리를 방해하는 것을 원하지 않기 때문입니다.

바이올린 바이올린

아래 바이올린의 단추를 누르면 애니메이션이 '일시 정지' 되어야 합니다.

네가 직접 이 페이지에서 해 봐라

이 페이지에 간단한 테스트 방법이 있습니다. (애니메이션을 다시 불러오려면 다시 불러와야 합니다.)
개발자 도구(F12)를 열고 콘솔 탭으로 이동합니다.
그런 다음 창 아래쪽에 다음 코드를 복사하여 붙여넣은 다음 Enter 키를 누릅니다.너는 GIF가 애니메이션 제작을 멈추는 것을 볼 수 있을 거야!

(function(){var d={},e={};d.stopAnim=function(a){var g=function(){var c=a.width,f=a.height,b=document.createElement("canvas");b.width=c;b.height=f;b.getContext("2d").drawImage(a,0,0,c,f);b.style.position="absolute";b.style.top="0";b.style.left="50%";b.style.transform="translate(-50%, 0)";b.setAttribute("aria-hidden","true");b.setAttribute("role","presentation");c=a.parentNode;c.style.position="relative";c.style.display="block";c.insertBefore(b,a);a.style.opacity=.01};a.complete?g():a.addEventListener("load",
g,!0)};e.freezeAll=function(){var a=document.querySelectorAll(".crayons-article__header img, .crayons-article__main img, .crayons-avatar img");for(x=0;x<a.length;x++)d.stopAnim(a[x])};e.freezeAll()})();

다음은 테스트할 애니메이션 GIF 이미지입니다.이것도 애니메이션을 멈춰야 하기 때문에 제 개인 정보 그림을 검사합니다.

GIF 애니메이션 제작을 중지한 후 ->를 오른쪽 단추로 눌러서 현재 정지된 이미지를 검사하여 현재 발생하고 있는 일을 전면적으로 이해하세요!

책갈피와 함께 사용

만약 당신이 아주 간단한 방식으로 사이트에서 그것을 사용하고 싶다면, 여기는 책갈피이다.
아래 바이올린에 연결된 책갈피 표시줄을 클릭하고 드래그하면 모든 글의 책갈피나 dev 홈페이지의 구독원을 누르고 애니메이션 프로필 사진과/또는 애니메이션 게시물 그림을 정지할 수 있습니다!

결론

보아하니 이것은 정확한 방법이 아니다. 정확한 방법은 이미지 서버를 처리하고 GIF에서 정적 이미지를 만드는 것이다.그리고 미디어 조회 검사role="presentation"가 prefers-reduced-motion로 설정되었는지 확인하고, 사람들이 운동을 줄이는 것을 더 좋아한다면 정적 이미지를 보냅니다.
그러나 더 큰 사이트에서 이 점을 실현하려면 많은 작업을 해야 할 수도 있다. 때로는 '열복원'이 몇 주 동안 지속될 수도 있고, 당신이 일을 정확하게 하는 것은 실행 가능한 선택이다.
이것은 성능에 있어서 분명히 매우 나쁘다. 어떤 사이트에도 복사해서 붙일 수 없다. 왜냐하면 사용하는 선택기는 dev.to만의 것이기 때문이다. (많은 작업이 필요하지는 않지만.)우리가 알고 있는 바와 같이, 이것은 영원히 전투의 50퍼센트이다!
그럼 어때요?이것은 생산에 투입할 수 있는 해커입니까?그것은 당신에게 고장났습니까? (고장나면 어떤 브라우저입니까?)이런 해커를 사용하면 불안해?!??
댓글로 알려주세요!