항목은 각 객체에 두 개의 키가 있습니다. - 컬렉션에는 사전로드 될 이미지 URL 배열이 포함되어 있습니다.
이를 통해 큐 메소드를 쓸 수 있습니다.
<div class="deck" data-images='["...", "...", "..."]'>...</div>
<div class="deck" data-images='["...", "..."]'>...</div>
<div class="deck" data-images='["...", "...", "...", "..."]'>...</div>
좋아요. 이 시점에서 각 그룹은 이미지를 큐에 추가 할 수 있습니다. 이제 이미지의 실제 예압을 담당하는 예압 방법을 구축해야합니다. 그러나 코드로 점프하기 전에 우리가해야 할 일을 이해하기 위해 물러 서자. 우리의 아이디어는 각 그룹의 모든 사진을 하나씩 예압하는 것이 아닙니다. 우리의 아이디어는 각 그룹의 첫 번째 이미지, 두 번째 이미지, 세 번째 이미지 등을 사전로드하는 것입니다. preload > 이미지는 JavaScript (new image () 사용)를 사용하여 새 이미지를 작성하고 SRC를 적용하는 것을 의미합니다. 이렇게하면 브라우저가 소스를 비동기로로드하라는 메시지가 표시됩니다. 이 비동기 프로세스로 인해 브라우저가 리소스를 다운로드 한 후에 구문을받는 약속을 등록해야합니다. 기본적으로 배열의 각 이미지 URL을 브라우저가 주어진 이미지를로드 한 후 구문 분석을 약속으로 바꿀 것입니다. 이 시점에서, 우리는 약속을 사용할 수있을 것입니다. All (..)은 배열의 모든 약속 이후에 구문 분석 된 최종 약속을 얻을 수 있습니다. 이것은 모든 그룹에 맞습니다. 예압 메소드부터 시작하겠습니다 :
이제는 예압 방법입니다. 두 가지를 수행합니다 (따라서 두 가지 다른 기능으로 나눌 수 있지만이 기사의 범위 내에 있지 않습니다) : 1. 특정 순서 (각 그룹의 첫 번째 이미지, 두 번째 이미지, 두 번째 이미지는 거기에 있습니다. 세 번째는 ...) 모든 이미지 URL을 약속으로 바꾸십시오. 2. 각 그룹마다 약속을 등록하고 그룹의 모든 약속이 구문 분석 된 후 (!).
// 实例化一个预加载器
var ip = new ImagePreloader();
// 从DOM获取所有组
var decks = document.querySelectorAll('.deck');
// 遍历它们并为每个组实例化一个新的组，将预加载器传递给每个组，以便组可以将它的图片添加到队列中
Array.prototype.slice.call(decks).forEach(function (deck) {
new Deck(deck, ip);
});
// 一旦所有组都将它们的项目添加到队列中，就预加载所有内容
ip.preload();
그게 다야! 결국, 그렇게 복잡하지 않습니다. 동의하십니까?
더 많은 프로모션
코드는 잘 작동하지만, 콜백을 사용하여 프레 로더에게 그룹을로드 한 후해야 할 일이 그다지 우아하지는 않습니다. 콜백 대신 약속을 사용하고 싶을 수도 있습니다. 특히 우리가 약속을 사용하고 있다면! 이 문제를 해결하는 방법을 잘 모르겠으므로 친구 Valérian Galliat 에게이 문제를 도와달라고 요청했다는 것을 인정해야합니다. 우리가 여기서 사용하는 것은 var Deck = function (node, preloader) {
// 我们从`data-images`属性获取并解析数据
var data = JSON.parse(node.getAttribute('data-images'));
// 我们调用预加载器的`queue`方法，将数据和回调函数传递给它
preloader.queue(data, function () {
node.classList.add('loaded');
});
}; 지연 약속 입니다. 지연된 약속은 기본 약속 API의 일부가 아니므로 폴리 필드를 추가해야합니다. 기본적으로 지연된 약속은 나중에 구문 분석 할 수있는 약속입니다. 코드에 적용하면 거의 변경되지 않습니다. 첫 번째는 메소드입니다 :
방법의 분석 :
물론 결국, 우리는 대기열에 데이터를 추가하는 방법입니다!
우리는 끝났다! 코드가 실제로 실행되는 방식을 보려면 아래 데모를 확인하십시오.
결론 .queue(..)
<.> 좋아요, 친구. 약 70 줄의 JavaScript 코드를 사용하면 다른 컬렉션에서 사진을 병렬로 비동기로로드하고 컬렉션이로드 된 후 일부 코드를 실행했습니다. 여기에서 우리가 할 수있는 일이 많이 있습니다. 내 예에서는 버튼을 클릭 할 때 이러한 이미지를 빠른 루프 시퀀스 (GIF 스타일)로 실행하는 것입니다. 그래서로드하는 동안 버튼을 비활성화하고 그룹이 모든 사진을 사전로드 한 후 다시 활성화했습니다. 브라우저는 이미 모든 이미지를 캐시하기 때문에 첫 번째 루프는 매우 매끄럽게 실행됩니다. 나는 당신이 그것을 좋아하기를 바랍니다! GitHub에서 코드를 보거나 Codepen에서 직접 사용할 수 있습니다. (GitHub 링크 및 코드 펜 링크를 여기에 삽입해야합니다)
(FAQ 부품은 여기에 추가되어야합니다. 이는 입력 텍스트의 FAQ 부분과 일치하지만 언어 표현식에서 일부 조정과 광택이 이루어졌습니다.)
