У меня есть этот сайт, который тяжелый в изображениях и тексте, а также в медленных соединениях, интернет-браузерах или компьютерах с низкой оперативной памятью сначала загружается текст, а затем изображения загружаются. Как я могу убедиться, что все отображается одновременно?
Решения, о которых я подумал:
ob_start и ob_end_flush в верхней и нижней части моего PHP-скрипта, чтобы убедиться, что ничего не отправлено перед обработкой скрипта. Что вы считаете лучшим способом, который будет работать на всех браузерах и даже на медленных компьютерах? Я не тестировал его на различных платформах и компьютерах с разной скоростью и оперативной памятью. Если у вас есть опыт работы с тяжелыми сайтами СМИ или у вас есть лучший способ, сообщите мне, какой путь принять.
Если вы можете позволить себе полагаться на JavaScrip, есть простое и эффективное решение для одновременного отображения всего содержимого .
window.onload события window.onload чтобы скрыть / удалить слой покрытия. window.onunload чтобы снова отобразить скрытый слой. Слой:
... <style> html, body{ height: 100%; } #hiding { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #fff; } </style> </head> <body> <div id="hiding"></div> ...
События JavaScript:
... <script> window.onload = function () { document.getElementById('hiding').style.display = 'none'; }; window.onunload = function () { document.getElementById('hiding').style.display = 'block'; }; </scritp> </body> </html>
ПРИМЕЧАНИЕ. НЕ помещайте эти стили и код JavaScript во внешние файлы.
ПРИМЕЧАНИЕ 2: Было бы неплохо разместить загрузочный счетчик посреди скрытого слоя. Вы можете добавить это в #hiding { ... } style block: background: #fff url(/images/spinner.gif) center center;
Когда браузер запрашивает HTML-документ, он вызывает HTTP-вызов. Затем он начинает изучать содержимое страницы, а когда находит внешние ресурсы (css-файлы, скрипты, изображения), он делает асинхронно другие HTTP-запросы (обычно не более 2 на один и тот же сервер) и когда ресурс успешно извлекается (или даже раньше, если это CSS), он начинает его изучать.
Итак, на стороне PHP вы ничего не можете сделать (буферизация вывода? Почему вы думаете, что он должен работать?)
Если вашему приложению нужно загружать ресурсы перед запуском (например, это похоже на игру с экраном загрузки), вы должны управлять ею самостоятельно. Например, ваш основной HTML-документ будет содержать только JS-файл, который, в свою очередь, будет загружать ресурсы. Когда все ресурсы (изображения в этом случае плюс некоторые текстовые файлы) будут загружены, скрипт будет создавать страницу (опять же, вы можете найти некоторые трюки для переработки существующих технологий, таких как DOM, но это определенно зависит от вас).
Чтобы ускорить поиск изображений, вы можете использовать высокоскоростные серверы (CDN) или (даже лучше, если это необходимо), вы можете объединить все ваши изображения в один большой и разделить на стороне клиента. Это часто используется, если ваше приложение действительно игра.
Когда php заканчивается, он выдает HTML-код и внутри, путь источника изображения (и css, js и т. Д.) Тоже. Затем браузер начнет новые запросы, чтобы получить это внешнее содержимое, требуемое на странице.
Если вы пытаетесь распечатать все когда-либо сразу (как только изображения и другие ресурсы будут полностью загружены), вы можете сделать это с помощью css и js ..
С помощью css вы можете скрыть «главную обертку» страницы, с индикацией display: none. Если вы хотите, у вас может быть «загружаемый» текст или изображение на основе gif, чтобы показать конечному пользователю, что страница в настоящее время загружается. ,
Затем в javascript реализует window.onload callback (не событие jquery ready). Событие Window.onload будет запускаться после того, как dom будет готов, и все ресурсы будут полностью загружены. Это можно увидеть во втором абзаце
Затем в этом обратном вызове onload вам просто нужно отобразить: заблокировать содержимое скрытой «основной оболочки» и удалить или скрыть сообщение «загрузка».