Блог

Главная - Вопросы по программированию - Как асинхронно предварительно загружать изображения

Как асинхронно предварительно загружать изображения

#javascript #php #image #preload #head

#javascript #php #изображение #предварительная загрузка #глава

Вопрос:

У меня есть набор видео, которые я экспортировал в frames и показываю текущий кадр на основе положения прокрутки (что-то вроде этого, но с использованием кадров изображений вместо видео)

И использование этого в <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 ?

Комментарии:

1. Проверьте это: perishablepress.com/3-ways-preload-images-css-javascript-ajax

Ответ №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 amp;amp; 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 amp;amp; 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 amp;amp; 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();
};