如何異步預加載圖像

Question

我有一組視頻，我導出到幀並根據滾動位置顯示當前幀（類似這樣，但使用圖像幀而不是視頻）

在<head>使用它會導致很多初始延遲，但之后的幀過渡非常平滑。

<?php for ($i = 0; $i <= 99; $i++) {
    $number =  $i < 10 ? '0'.$i : $i; ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/media/frames/01/optim/_scene-1-00<?php echo $number; ?>.jpg" as="image">
<?php } ?>
<?php for ($i = 0; $i <= 99; $i++) {
    $number =  $i < 10 ? '0'.$i : $i; ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/media/frames/01/optim/_scene-2-00<?php echo $number; ?>.jpg" as="image">
<?php } ?>
<?php for ($i = 0; $i <= 99; $i++) {
    $number =  $i < 10 ? '0'.$i : $i; ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri()?>/media/frames/01/optim/_scene-3-00<?php echo $number; ?>.jpg" as="image">
<?php } ?>
...

關於如何僅預加載第一個場景而其余場景在window.onload之后預加載的任何想法？

Answer 1

我最終這樣做了：

function preloadRestOfScenes() {
  /* Scene 2 */
  let html = "";
  for (let i = 0; i <= 249; i++) {
    let number;
    if (i < 10) {
      number = "00" + i;
    } else if (i >= 10 && i < 100) {
      number = "0" + i;
    } else {
      number = i;
    }
    html += `<link rel="preload" href="${stylesheet_directory_uri}/media/frames/02/optim/scene-2-${number}.jpg" as="image">`;
  }
  document.querySelector("head").insertAdjacentHTML("beforeend", html);

  /* Scene 3 */
  html = "";
  for (let i = 0; i <= 549; i++) {
    let number;
    if (i < 10) {
      number = "00" + i;
    } else if (i >= 10 && i < 100) {
      number = "0" + i;
    } else {
      number = i;
    }
    html += `<link rel="preload" href="${stylesheet_directory_uri}/media/frames/03/optim/scene-3-${number}.jpg" as="image">`;
  }
  document.querySelector("head").insertAdjacentHTML("beforeend", html);

  /* Scene 4 */
  html = "";
  for (let i = 0; i <= 299; i++) {
    let number;
    if (i < 10) {
      number = "00" + i;
    } else if (i >= 10 && i < 100) {
      number = "0" + i;
    } else {
      number = i;
    }
    html += `<link rel="preload" href="${stylesheet_directory_uri}/media/frames/04/optim/scene-4-${number}.jpg" as="image">`;
  }
  document.querySelector("head").insertAdjacentHTML("beforeend", html);
}

和

window.onload = () => {
  preloadRestOfScenes();
};

如何異步預加載圖像

問題描述

1 個解決方案

解決方案1
0 已采納 2020-10-13 12:32:49

如何異步預加載圖像

問題描述

1 個解決方案

解決方案1 0 已采納 2020-10-13 12:32:49

解決方案1
0 已采納 2020-10-13 12:32:49