IsInViewport가 img를 gif로 한 번 변경합니다.

Question

이 문제는 완전히 해결되었습니다.

내 목표는 img가 뷰포트에있는 경우 img를 gif로 변경하는 것입니다.

저는 IsInViewport 라이브러리를 사용했습니다 : https://github.com/zeusdeux/isInViewport 그리고 http://www.verticalstrategy.com/agile_strategy/ (아래 참조)에 다음 코드를 구현했습니다.

왜 내 부울이 작동하지 않는 것처럼 보이고 gif가 뷰포트 내에서 스크롤 할 때마다로드 될 수 있습니까? 여기

jQuery(document).ready(function ($) { 

    gifset = false; 

    if (gifset == false) { 

     $(window).scroll(function() { 

      $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
      $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
      $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 
      $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 

      if ($(".for-large-device .wpb_wrapper .vc_single_image-wrapper").is(':in-viewport')) { 
       gifset = true; 
      } 

     }); 
    }; 
}); 

Answer 1

는 코드가 자연 언어로, 무엇이다 :

: 페이지가 준비되면 페이지에 대한

• 대기는
• 준비 할 수 있습니다. gifset을 선언하고 false로 설정하십시오.
• . gifset은 false [힌트 : 항상]의 경우이 않습니다 :
• ..

이

여기서 문제는 당신이 단지를 설정 한 후 gifset 변수 권리를 확인하는 것이입니다 ... 스크롤 리스너

을 .. 등록 . 그것은 그 범위에서 절대로 바꿀 수 없다.

변수 체크를 스크롤 리스너 내부로 옮기면 작동합니다. 모든 스크롤의 결과로 유지되므로,

jQuery(document).ready(function ($) { 

    gifset = false; 

    $(window).scroll(function() { 

     if(gifset) { 
      return; 
     } 

     $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
     $(".for-large-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_Landscape-1.gif?"); 
     $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('src', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 
     $(".for-small-device .wpb_wrapper .vc_single_image-wrapper img:in-viewport").attr('srcset', "http://www.verticalstrategy.com/wp-content/uploads/2016/12/agileStrategy_portrait-1.gif?"); 

     if ($(".for-large-device .wpb_wrapper .vc_single_image-wrapper").is(':in-viewport')) { 
      gifset = true; 
     } 

    }); 
}); 

가 더 나은 솔루션은 이미지 소스가 업데이트 된 후, 청취자의 등록을 취소하는 것입니다 : gifset 사실이 종료하는 경우 자, 내가 그렇지 않으면 이전과 작업을 수행, 확인 그 때까지 함수 호출 (짧은 함수 호출이라 할지라도 그것은 불필요한 오버 헤드 임).