Если все изображения заключены в один элемент (скажем, div), тогда вы можете установить его CSS по умолчанию display: none, чтобы даже во время рендеринга страницы он не показывался пользователю.Затем, когда весь контент загружен, отобразите его для пользователя.Примерно так:
<style type="text/css">
#imageContent { display: none; }
</style>
<div id="imageContent">
<!-- your images are here -->
</div>
<script type="text/javascript">
// assuming jQuery because, well, come on
$(document).load(function() {
$('#imageContent').show();
});
</script>
Теперь это не дает никаких гарантий, что загрузка изображений не займет много времени, в результате чего пользователь некоторое время не видит ни одного из них.И если некоторые из них не загружаются, я не уверен, что произойдет.Я полагаю, что событие все равно сработает, как только DOM прекратит попытки загрузки сбойных ресурсов.
Естественно, вы захотите придать всему этому стиль, чтобы переход от отсутствия изображений ко всем изображениямгладкий пользовательский опыт.Если это займет несколько минут, то, возможно, пользователь уже взаимодействует со страницей, когда изображения неожиданно загружаются и перемещают содержимое (я не видел вашу страницу, поэтому, возможно, это не проблема.)
Итак, выВы захотите проверить что-то вроде этого на известном медленном соединении или на известных разорванных изображениях, чтобы увидеть, как все это ведет себя.