Моя цель — начать предварительную загрузку всех изображений веб-сайта для большого веб-сайта фотогалереи на главной странице (index.php), чтобы пользователь не заметил их. Если пользователь перейдет на сайт (home.php) до того, как все изображения будут загружены, что обязательно произойдет, процесс предварительной загрузки должен продолжаться незаметно для пользователя. И если пользователь переходит на другие страницы (portfolio.php и т. д.), процесс предварительной загрузки снова продолжается. Идея состоит в том, что, надеюсь, с каждой новой страницей процесс не будет полностью перезапускаться, потому что многие изображения уже будут кэшированы, и пользователю не придется ждать, пока все изображения предварительно загрузятся.
В настоящее время я загружаю все изображения с элементами html img, которые находятся внутри div со стилем = "display: none". Элементы img загружаются с задержкой с помощью Javascript (техника LazyLoad), поэтому страница загружается первой, не дожидаясь загрузки img.
Есть лучший способ сделать это?
<?php
foreach ($imageArray as $image) {
//code to find $fullImagePath.......
echo "<div><img u=\"image\" src=\" \" data-src=\"$fullImagePath\" height=\"100\"; width=\"100\"; class=\"lazy\" /></div>";
} // end of loop
?>
<script type="text/javascript">
$(window).bind("load", function() {
var timeout = setTimeout(function() {
$("img.lazy").each(function(){
$(this).attr('src', $(this).attr('data-src'));
})
}, 500);
});
</script>
