Google 크롬 캐시가 내 동위 원소 자바 스크립트 표를 깨습니다.

Question

Google 웹 사이트에서 Isotope 라이브러리로 만든 작업 포트폴리오이 있습니다.

웹 사이트 :https://www.beedit.es

도서관 동위 원소 :https://github.com/metafizzy/isotope

문제는 크롬 데스크톱 브라우저 또는 (예를 들어) 사파리 아이폰 OS 브라우저, 당신이 웹 사이트를 새로 고침하고있을 때이다 브라우저가 로컬 메모리에 캐시 했으므로 표가 사라집니다.

브라우저에서 캐시를 비활성화하면 문제가 사라지지만 해결 방법이 아닙니다.

임의의 버전 문자열을 .js 라이브러리 (? v = [RAMDOM])에 추가하는 등 많은 작업을 검색하고 시도했지만 작동하지 않습니다. 다른 작업이어야합니다.

파이어 폭스의 최신 버전에서는 나에게 발생하지 않습니다.

해설 동영상 :https://youtu.be/hhuD_1sCbx8

Answer 1

.load 이벤트는 캐시에서로드되는 이미지에 대한 발생하지 않습니다.

당신은

$('#work-container > article > img').one('load',function(){ 
       $('.isotope-item').show(); 
       $('.img-wait').fadeIn('fast'); 
       $('#work-container').isotope({ 
        itemSelector: '.isotope-item', 
        layoutMode: 'masonry', 
        resizesContainer: true, 
        masonry: { 
         columnWidth: 300, 
         isFitWidth: true 
        } 
       }); 
      }).error(function(){ 
      }).each(function(){ 
       if(this.complete) { 
        $(this).load(); 
       } 
      }); 

를 사용하여 해당 문제를 해결할 수 있습니다