약속과 병렬로 이미지를 사전로드합니다

코어 포인트

약속을 사용하여 그림을 비동기로로드하여 다른 이미지 수집을 동시에로드하고 컬렉션이로드 된 후 코드를 실행할 수 있습니다. 이는 전체로드 시간을 줄임으로써 웹 사이트 성능을 크게 향상시킵니다.

이 기술에는로드 할 이미지를 대기하는 모든 이미지 "그룹"(컬렉션)에 대한 공유 프리 로더를 작성하는 것이 포함됩니다. 그런 다음 프레 로더는 다음 그룹이 시작되기 전에 한 그룹이 완료되기를 기다리지 않도록 (순서대로) 사진을 병렬로로드하기 시작합니다.

각 이미지 URL은 약속으로 대체되며 브라우저가 이미지를로드 한 후에 구문 분석됩니다. 그런 다음 메소드를 사용하여 각 그룹에 대한 약속을 만들 수 있습니다. 각 그룹은 배열의 모든 약속 이후에 구문 분석됩니다.
• 이 기술은 콜백 대신 지연된 약속을 사용하여 그룹이로드 된 후에 수행해야 할 일을 사전으로 알려 주면 더욱 향상 될 수 있습니다. 이것은 나중에 약속의 해결을 통제 할 수있게한다.
• 이 기사에서는 특정 문제에 대해 설명합니다. 많은 이미지를 병렬로 예압하는 방법. 나는 최근 에이 문제를 겪었고 처음에 예상했던 것보다 더 어려워서 많은 것을 배웠다는 것을 알았습니다. 먼저 장면을 간단히 설명하겠습니다. 페이지에 여러 "그룹"이 있다고 가정합니다. 광범위하게 말하면, 그룹은 사진 모음입니다. 우리는 각 그룹의 이미지를 사전로드하고 그룹의 이미지가로드되는시기를 알 수 있습니다. 이 시점에서 우리는 그룹에 클래스 추가, 이미지 시퀀스 실행, 무언가 기록 등과 같은 모든 코드를 자유롭게 실행할 수 있습니다. 처음에는 단순하고 매우 간단하게 들립니다. 그러나 당신은 아마 나와 같은 세부 사항을 간과했을 것입니다. 우리는 모든 그룹이 순차적으로가 아니라 병렬로로드되기를 원합니다. 다시 말해, 그룹 1의 모든 그림을 먼저로드 한 다음 그룹 2의 모든 그림, 그룹 3의 모든 사진 등을로드하고 싶지 않습니다. 실제로, 이것은 이전 그룹이 완료되기까지 기다려야하는 일부 그룹이 있기 때문에 이것은 이상적이지 않습니다. 따라서 시나리오에서 첫 번째 그룹에 수십 장의 사진이 있고 두 번째 그룹에 하나 또는 두 개의 사진 만있는 경우 두 번째 그룹을 준비하기 전에 첫 번째 그룹이 완전히로드 될 때까지 기다려야합니다. 이것은 좋지 않습니다. 우리는 확실히 더 잘할 수 있습니다! 따라서 우리의 아이디어는 모든 그룹을 병렬로로드하여 한 그룹이 완전히로드되면 다른 그룹을 기다릴 필요가 없습니다. 이를 위해 일반적인 아이디어는 모든 그룹의 첫 번째 이미지를로드 한 다음 모든 그룹의 두 번째 이미지를로드하는 것입니다. 좋아, 마크 업을 만들어서 시작하겠습니다.
그건 그렇고,이 기사에서, 나는 당신이 약속의 개념에 익숙하다고 생각합니다. 그렇지 않은 경우이 기사를 읽는 것이 좋습니다.
• 태그 Promise.all() 태그 관점에서 그룹은 데크 클래스가있는 요소 (예 : div)에 지나지 않아서 그것을 찾을 수 있고 이미지 URL 배열이 포함 된 데이터 이미지 속성 (JSON으로)에 지나지 않습니다. ).

<div class="deck" data-images='["...", "...", "..."]'>...</div>
<div class="deck" data-images='["...", "..."]'>...</div>
<div class="deck" data-images='["...", "...", "...", "..."]'>...</div>

준비

JavaScript에서 이것은 예상대로 약간 복잡합니다. 우리는 두 가지 다른 것들을 만들 것입니다 : 그룹 클래스 (매우 큰 따옴표 사이에 이것을 넣고 용어를 선택하지 마십시오)와

preloader 도구. 프리 로더는 특정 순서로로드하기 위해 모든 그룹의 모든 사진을 알아야하므로 모든 그룹간에 공유해야합니다. 그룹은 자체 프레 로더를 가질 수 없습니다. 그렇지 않으면 초기 문제가 발생합니다. 코드는 순차적으로 실행되며, 이는 우리가 원하는 것이 아닙니다. 따라서 우리는 각 그룹에 전달되는 프리 로더가 필요합니다. 후자는 Preloader의 대기열에 이미지를 추가하고 모든 그룹이 큐에 항목을 추가하면 Preloader가 사전 로딩을 시작할 수 있습니다. 코드 실행 스 니펫은 다음과 같습니다 지금까지 이번이 말이되기를 바랍니다! 빌드 그룹 그룹과 함께하고 싶은 일에 따라이 "클래스"는 상당히 길어질 수 있습니다. 시나리오에서는 이미지가로드 된 후 노드에로드 클래스를 추가하는 것입니다. 데크 기능에서해야 할 일이 많지 않습니다. 1. 데이터를로드하십시오 (데이터 이미지 속성). 사전로드됩니다.

// 实例化一个预加载器
var ip = new ImagePreloader();
// 从DOM获取所有组
var decks = document.querySelectorAll('.deck');

// 遍历它们并为每个组实例化一个新的组，将预加载器传递给每个组，以便组可以将它的图片添加到队列中
Array.prototype.slice.call(decks).forEach(function (deck) {
  new Deck(deck, ip);
});

// 一旦所有组都将它们的项目添加到队列中，就预加载所有内容
ip.preload();

지금까지, 잘 지내고 있지 않습니까? 남은 유일한 것은 프레 로더이지만,이 기사에서 코드의 가장 복잡한 부분이기도합니다.
프리 로더를 빌드

우리는 Preloader가 큐에 이미지 수집을 추가하는 큐 메소드와 예압을 시작하기위한 예압 메소드가 필요하다는 것을 이미 알고 있습니다. 또한 Preloadimage라는 이미지를 사전로드하려면 도우미 기능이 필요합니다. 여기에서 시작합시다 : 프리 로더는 내부 큐 속성이 필요합니다.

항목은 각 객체에 두 개의 키가 있습니다. - 컬렉션에는 사전로드 될 이미지 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 부분과 일치하지만 언어 표현식에서 일부 조정과 광택이 이루어졌습니다.)

위 내용은 약속과 병렬로 이미지를 사전로드합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!