InstantClick 사전 로딩 문제에 대한 완벽한 솔루션

이 글은 주로 InstantClick 사전 로딩 문제에 대한 해결 방법을 소개합니다. 편집자는 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

어젯밤 변환 중에 코드 하이라이팅을 실행하지 못했습니다. 정확히는 한 번만 실행되고 두 번째에는 실행되지 않았습니다. 그래서 이에 대해 설명하는 글을 썼고, InstantClick 문서를 대략 읽어본 결과 주로 블랙리스트 영역 문제라는 것을 알게 되었습니다. 내 개인적인 이해에 따르면 블랙리스트에는 주로 두 가지 일반적인 필터링 유형이 포함되어 있습니다. 하나는 태그이고 다른 하나는 js입니다. 그 원칙에 따르면 블랙리스트 영역은 처리되지 않습니다(일반적인 수동 열기에 따라 로드 및 새로 고침). 이러한 종류의 비처리로 인해 해당 구조 및 js가 작동할 수 있습니다. .

즉, InstantClick이 실행될 때 참조 문을 살펴보세요.

<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/js/instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

문은 InstantClick 자체를 필터링합니다. 이는 실행 후 정상적으로 새로 고치는 것과 같습니다.

JS를 정상적으로 로드하고 새로 고침

문 자체의 data-no-instant 매개변수는 이를 처리하지 않고 구조의 이 부분을 정상적으로 새로 고치는 것을 의미합니다. 따라서 다른 j가 InstantClick에서 작동하도록 하려면 js 자체를 새로 고쳐야 합니다. instantclick.min.js에 코드를 작성하거나 data-no-instant 매개변수를 사용하여 독립적으로 참조할 수 있습니다. instantclick.min.js에 자신만의 js를 작성하지 않는 경우에는 4개의 매개변수를 사용하여 다시 로드해야 합니다. 참조: http://instantclick.io/scripts

<script data-no-instant>
InstantClick.on(&#39;change&#39;, function() {
// 回调
});
InstantClick.init();
</script>

a 태그

InstantClick은 새 창에서 열린 태그를 처리하지 않으며, 데이터가 없는 매개변수가 있는 태그로 묶인 태그도 처리되지 않습니다. 예를 들어, <p data-no-instant> 이 부분은 정상적으로</p> 새로 고쳐집니다. 8d81ca4b16c93367fc7a7a26af8a0e41这部分会按正常情况刷新94b3e26ee717c64999d7867364b1b4a3。

最后总结：data-no-instant

최종 요약: data-no-instant 속성은 페이지가 전환될 때 인스턴트 클릭이 요소를 반복적으로 로드하는 것을 방지하는 데 사용됩니다(정상적으로 새로 고침을 의미). 스크립트 및 스타일 태그에 사용할 수 있고 태그에 배치할 수도 있습니다. 즉, 링크는 순간 클릭 가속 없이 일반적인 방법으로 열리지만 알아야 하는 p 태그에는 쓸모가 없습니다.

위의 두 가지 사항을 이해하시면 처리하기가 더 쉬울 것입니다. 이전에는 ajax라고 생각하고 온몸으로 요청했습니다. 즉, 처리되지 않은 부분을 body 태그 외부에 넣는 것도 가능합니다.

🎜 개인적으로 매우 빠른 캐시 뒤로 및 앞으로 기능이 마음에 든다는 점을 언급할 가치가 있습니다. 🎜

위 내용은 InstantClick 사전 로딩 문제에 대한 완벽한 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!