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

Question

У меня есть домашняя страница, которая содержит огромное количество php-кода для заполнения div-ов (включая подписку на рассылку с проверкой, контент из базы данных mysql и различные статические изображения).Вся страница построена поверх фонового перекрестного затухания JavaScript.

Все это прекрасно работает и выглядит хорошо ..... однако - при загрузке страницы последним «div», который появляется, является фоновое изображение - эффективно создающее большое «белое пространство», пока все div не имеютзагружен, и фоновое изображение отображается.

Есть ли способ загрузить первое фоновое изображение, прежде чем что-либо еще, чтобы пользователь не остался с этим пустым пространством при переходе на сайт?

Я видел при использовании изображений ролловеров, что версия ролловера может быть предварительно загружена в сценарий - будет ли это лучшим методом для поиска такого решения?

Любая помощь или совет, которые высоко ценятся - рады показать код, если требуется - просто не думали, что это будет слишком полезно, учитывая количество, которое есть в моем сценарии !!

Спасибо JD

Answer 1

Я думаю, что ваша проблема в порядке загрузки изображений.

Если ваше фоновое изображение загружается после всех других элементов, убедитесь, что ваше фоновое изображение загружено как можно скорее. Если фоновое изображение - div со свойством CSS background-image: url (myimage.png), включите файл CSS в тег head.

Кроме того, вы можете сохранить фоновое изображение в формате png с чересстрочной разверткой . (В фотошопе: сохранить для Интернета и устройств> png24> галочка чересстрочная) Таким образом, изображение быстро будет отображаться с низким качеством и улучшится по мере передачи данных в ваш браузер.

Если вы хотите контролировать загрузку изображений с помощью jQuery, посмотрите на этот вопрос: Предварительная загрузка изображений с помощью jQuery . Но я сомневаюсь, что это будет полезно для вас, так как ваша проблема - это порядок загрузки элементов.

Answer 2

Разделите запросы http.

Таким образом, ваша страница остается страницей с фоновым изображением и только с несколькими элементами.

С помощью javascript создайте запрос ajax, который загружает содержимое страницы, и подключите эту функцию ajax к функции $ (document) .ready () (если вы используете jquery, в противном случае вы можете использовать функцию window.load), поэтомусодержимое страницы будет загружено сразу после загрузки страницы.

Answer 3

Вы пытались предварительно загрузить изображение с помощью JS?

Примерно так:

<script type="text/javascript">
    bg = new Image();
    bg.src="background.png";
</script>

Answer 4

Если вы хотите сделать это без использования JS, вы можете включить тег div или img в качестве первого элемента под телом на странице, а затем установить стиль отображения тега img: нет. Сначала будет загружено изображение, поэтому при последующем использовании оно должно быть загружено и готово к отображению.

Answer 5

вы не указали, использовали ли вы jquery или нет ..

если jquery вызовите функцию Image.load. в обратном вызове этого используйте все js, так что js вызывается после загрузки этого изображения ..

Answer 6

Вы также можете рассмотреть возможность использования файла кэша на стороне клиента, как указано в HTML5.
Это не полностью решает проблему, так как при первом входе пользователя на ваш сайт ему приходится ждать загрузки изображений, но это может значительно повысить производительность в следующий раз, когда тот же пользователь вернется.
Смотрите здесь для получения дополнительной информации.