#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();
};