Safari에서 입자 슬라이더 로고의 크기가 조절되지 않습니다.

Question

HTML 5 빈 어린이 테마를 사용하여 Wordpress에서 프런트 엔드 사이트를로드합니다. 나는 화면 크기가 960px 이상일 때 입자 슬라이더를 사용하여 로고 효과를가집니다. 화면 크기 : < 960px 플랫 로고 이미지가 있습니다. Firefox와 Chrome 모두에서 정상적으로 작동하지만 Safari에서 로고 사이의 크기를 조정할 때 PS 효과가 다시 표시되기 전에 수동으로 페이지를 새로 고쳐야합니다 (cmd + r).

<?php /* Template Name: particle-slider */ ?> 
<!-- particle-slider template --> 

    <div id="particle-slider"> 
     <div class="slides"> 
      <div class="slide" data-src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png"></div> 
     </div> 
     <canvas class="draw" style="width: 100%; height: 100%;"></canvas> 
    </div> 
    <script type="text/javascript"> 
     var ps = new ParticleSlider({ 'width':'1400', 'height': '600' }); 

     // patch nextFrame to track failure/success 
     var nextFrameCalled = false; 
     ps.oldNextFrame = ps.nextFrame; 
     ps.nextFrame = function() { 
      try { 
       ps.oldNextFrame.apply(this, arguments); 
       nextFrameCalled = true; 
      } catch (e) { 
       console.log(e); 
       nextFrameCalled = false; 
      } 
     }; 

     var addEvent = function (object, type, callback) { 
      if (object.addEventListener) { 
       object.addEventListener(type, callback, false); 
      } else if (object.attachEvent) { 
       object.attachEvent("on" + type, callback); 
      } else { 
       object["on" + type] = callback; 
      } 
     }; 
     var oldWidth = window.innerWidth; 
     addEvent(window, 'resize', function() { 
      var newWidth = window.innerWidth; 
      if (newWidth >= 960 && oldWidth < 960) { 
       console.log("Restarting particle slider " + newWidth); 
       ps.resize(); 
       if (!nextFrameCalled) 
        ps.nextFrame(); // force restart animation 
       else { 
        // ensure that nextFrameCalled is not still true from previous cycle 
        nextFrameCalled = false; 
        setTimeout(function() { 
         if (!nextFrameCalled) 
          ps.nextFrame(); // force restart animation 
        }, 100); 
       } 
      } 
      oldWidth = newWidth; 
     }); 
    </script> 
    <div id="logo"> <img src="<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logo.png"> </div> 

    <!-- particle-slider template --> 

내가 같은 효과를 필요

입자 slider.php - 여기

Original Stack Q&A 내가 지금 사용하고 자바 스크립트 코드입니다 - 코드는 내가 여기에 게시 원래 질문에서 공급 된 이 사이트에서 볼 수 있듯이 here - 페이지의 크기가 변경됨에 따라 로고가 입자에서 정적으로 전환됩니다. 입자 로고가 완벽하게 다시 나타납니다.

다른 모든 관련 코드는 변경 사항이 없으므로 원래 질문과 연결됩니다. 콘솔에서 콘솔이 작동하지 않는 이유가 무엇인지는 알 수 없습니다.

Answer 1

resize 이벤트는 여러 번 실행될 수 있으며 setTimeout에 넣은 내용은 현재 코드 블록이 실행 된 후에 호출됩니다. ParticleSlider을 선택하지 않고 말하기는 어렵지만 전역 변수 (nextFrameCalled, oldWidth)와 기대되는 순서대로 콜백이 혼합 된 것이 원인이라고 생각합니다.

나는 의도가 으로 바뀌 었습니다.은 강제로 다시 시작합니다. ParticleSlider.nextFrame()을 호출하고 싶지만 이미 호출 된 경우 100ms 먼저 기다려야합니다. canvas 요소가 requestAnimationFrame에 표시되지 않는에 대한 해결 방법으로 나타납니다이 질문에 대한 answer you've adapted 보면

- 여전히이 100ms 후 또는 ParticleSlider.nextFrame() 후 사용하지 못할 수 있습니다 그것을 얻기 위해 시도를 여러 번 호출 된 발사.

원래 질문과 selected answer에서 구성 요소를 재설정하려면 ParticleSlider.init()해야한다고 생각하지만 깜박이는 것은 호출 될 때마다 실행하는 데 시간이 걸리기 때문입니다. ParticleSlider.nextFrame()은 그리 오래 걸리지 않으며 jank을 피하기 위해 requestAnimationFrame을 사용하지만 Safari에서 크기를 변경하면 가 생성되지 않습니다. 그래서

, 수정하기 :

1. 사용 ParticleSlider.init()
2. 디 바운스 당신이 그것에게 시간을 많이 발사하지 않을 수 있도록 크기 조정 이벤트
3. 화재 그것을 한 번 사용 후 약간의 지연이 중단 된 발사 크기 조정 이벤트. 당신은 여전히 ​​플래시 및 구성 요소 다시 처음 상태로 지연을 볼 수 있지만, 한 번만 것이다

   var timeout = null; 
   window.addEventListener('resize', function() { 
       // Clear any existing debounced re-init 
       clearTimeout(timeout); 
   
       // Set up a re-init to fire in 1/2 a secound 
       timeout = setTimeout(function() { 
        ps.init(); 
       }, 500); 
   }); 
   

   :

코드 같은 것을 할 것이다.

ParticleSlider은 작성자가 더 이상 사용하지 않으며 NextParticle으로 대체되었습니다. 실제로 이러한 종류의 문제를 해결할 수 있습니다 (사실 크기 조정을 처리하는 특정 기능이 있음). 유료 구성 요소이기 때문에 돈을 가치있게 생각하거나 (또는 ​​직접 버그를 수정할 수있는 오픈 소스 구성 요소로 전환해야 함) 도움을 요청하는 것이 좋습니다.

Answer 2

그래서 나는 이전에 Q & A를 사용하여 나의 단계를 되돌아 보았습니다. 이전에 일부 샘플 링크에 문제가있는 것으로 보였지만 지금은 작동하는 것처럼 보입니다 (example).

페이지 검사관에 들어가서이 예제를 실행하는 코드와 실제 응답에서 전구가 깜박 거리는 원인 사이에 약간의 차이점을 발견했습니다. 이것은 내가 지금 WordPress 사이트에 넣은 코드입니다. -

<script type="text/javascript"> 
     //wait until the DOM is ready to be queried 
     (function() {//document.addEventListener('DOMContentLoaded', function() { //DOM-ready callback 
      var ps, timeout; 
      var img1 = new Image(); 
      img1.src = '<?php echo home_url(); ?>/wp-content/uploads/2017/10/havoc_logohight.png';//havoc_logo_e6os2n.png'; 
      var imgs = [ img1 ]; 
      handlePS(); 
      window.addEventListener('resize', function() { 
       //https://davidwalsh.name/javascript-debounce-function 
       if (timeout) { //check if the timer has been set 
        clearTimeout(timeout); //clear the timer 
       } 
       //set a timer 
       timeout = setTimeout(handlePS, 250); 
      }); 

      function handlePS() { 
       if (document.body.clientWidth >= 960) { 
        //check if ps is assigned as an instance of the ParticleSlider 
        if (ps != undefined && typeof ps !== null) { 
         ps.init(); //refresh the particle slider since it exists 
         console.log('called init on ps'); 
        } else { 
          if (window.location.search.indexOf('d=1') > -1) { 
            debugger; 
          } 
         //otherwise create a new instance of the particle slider 
         ps = new ParticleSlider({ 
          width: 1400, 
          height: 600, 
          imgs: imgs 
         }); 
        } 
       } 
       else { 
        //when the flat logo is displayed, get rid of the particle slider instance 
       // delete ps; 
        ps = null; 
       } 
      } 
     })(); 
    </script> 

이제 Chrome/Safari/Firefox의 모든 주요 브라우저에서 잘 작동합니다. 그것은 크기를 재조정하는 동안 페이지의 나머지 부분을 푸시하고 약간의 시간이 걸릴 것입니다. 재기동 속도를 높이는 타이머 옵션이 있는지 확실하지 않습니다. 그렇지 않으면 모든 것이 잘 작동합니다.