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

Моя цель состоит в том, чтобы начать предварительную загрузку всех изображений веб-сайта для большого веб-сайта фотогалереи на главной странице (index.php) так, чтобы он не воспринимался пользователем. Если пользователь заходит на сайт (home.php) до загрузки всех изображений, что обязательно произойдет, процесс предварительной загрузки должен оставаться невидимым для пользователя. И если пользователь нажимает на другие страницы (portfolio.php и т. Д.), Процесс предварительной загрузки снова продолжается. Идея состоит в том, что, как мы надеемся, с каждой новой страницей процесс не будет полностью перезапущен, поскольку многие изображения уже будут кэшированы, и пользователю не придется ждать, пока все изображения будут предварительно загружены.

В настоящее время я загружаю все изображения с элементами html img, которые находятся внутри div с style = «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>