Как сделать preloader?
Знаю-знаю, было уже много подобных тем, но есть одна проблема, я нигде не могу, как создать прелоадер, который будет изначально появляться на фоне, и пропадет лишь тогда, когда сам полностью загрузится.
Есть допустим страница с текстом посредине. Как сделать, чтобы эта страница показывалась поверх той, которая загружается, до тех пор, пока главная страница не загрузиться. Мне не нужна визуализация зависимости прелоадера от подгрузки, которая регулируется просто задержкой.
Как сделать именно настоящую проверку прелоадера на загрузку всей страницы?
- Вопрос задан более трёх лет назад
- 9995 просмотров
Комментировать
Решения вопроса 2
Роман @alone_lion1987
Веб-разработчик
Примерно следующим образом.
В самом начале скрываем допустим основной контент, который находится во враппере, ну к примеру задав прозрачность 0
#wrapper < opacity: 0; >#main_preload
В разметке делаем страницу, которая будет отображаться пока идет загрузка, но мне проще ориентироваться будет на прелоадер (как то привычнее, но смысл реализации будет тем же). Поэтому сделаем пустой див #main_preload
Вообще разметка примерно следующего типа:
Document Делаем скрипт loader.js, примерный код дернул со старого своего проекта (поэтому полностью на код ориентироваться не стоит), прелоадер (gif) будет крутится в центре экрана, пока не загрузится основной контент:
var preload = $("#main_preload"), w = $(window).width() / 2 - 30, h = $(window).height() / 2 - 30; preload.html(' '); preload.css(); $(window).load(function () < setTimeout(function () < preload.animate(, 50, function () < preload.html("") >); $("#wrapper").animate(, 50) >, 250) >);Суть в использовании $(window).load( ); setTimeout тут не помню уже зачем, вроде для какой то красивой задержки, но эта задержка не имеет ничего общего с основной загрузкой. Там плавный переход получается такой: прелоадер крутится, пока весь контент не будет загружен (и картинки и тд), потом идет плавное затухание прелоадера на прозрачность 0 и одновременное появление основного контента (прозрачность 1).
AJAX. Отображение готовности результата в процентах.
Есть проект по недвижимости. Пользователь задаёт параметры поиска объекта недвижимости, все эти параметры скидываются через AJAX скрипту. И на месте вывода результата крутится колёсико. Поиск может занимать достаточно продолжительное время от 2 до 7 секунд. Хотелось бы, чтобы вместо колёсика отображался процент готовности обработки запроса. Как такое учудить, подскажите?
На сайте с 25.05.2008
21 марта 2010, 09:11
Каким образом осуществляется поиск, что он так много времени занимает?
Лог в помощь!
На сайте с 04.02.2008
21 марта 2010, 09:12
Надо оптимизировать запросы и поиск, а не маяться дурью. 🙂
На сайте с 25.05.2008
21 марта 2010, 09:16
Алексей Барыкин, не, ну всякое бывает ) Может у товарища скрипт опрашивает сотню баз разных агентств недвижимости. Но с вами я тоже согласен )
21 марта 2010, 09:21
Каким образом осуществляется поиск, что он так много времени занимает?
Ну ищет предприниматель себе коровник, например. Вот и извращается. У коровника между прочим более 30 всяких параметров :), а таких предпринимателей куча и объектов почти 5000. Когда параметров мало — быстренько, а когда много, там еще и расчёты всякие нужно вести. Сумма затрат на содержание, в зависимости от еще 5 параметров. Плюс там еще идет расчёт налоговой ставки, в зависимости от региона, различные коэф. понижения, повышения и т.д.
Надо оптимизировать запросы и поиск, а не маяться дурью.
Пока есть возможность только кэш использовать. Запросы, как могли оптимизировали. Теперь ждём, пока московские программисты базу в нормальный вид приведут. А ждём уже с 12 января
На сайте с 25.05.2008
21 марта 2010, 09:35
Вы так и не ответили на мой вопрос. Придется проявлять телепатические способности. Если поиск осуществляется по одной базе данных, и объектов в ней всего 5000, то даже если поиск осуществляется по 30 критериями, он никак не должен занимать столько времени. Если конечно по «расчетами» не подразумевается решение систем дифференциальных уравнений NN-го порядка 😀 Т.е. нужно включать мозг, приводить в порядок базу и запросы. Далее по существу. Если поиск осуществляется оним запросом, то вашу задачу вы не решите. (Вы сможете отображать или 0% или 100%) Если поиск осуществляется двумя запросами, то вы можете отображать 0% или 50% или 100% И т.д.
На сайте с 07.05.2006
21 марта 2010, 11:51
Если ну очень надо в процентах, то можно вместо колесика показывать анимированный gif длительностью 7 секунд: 5%-8.5%-12.65% -и т.д до 99%. После ответа показать gif 100%.
На сайте с 14.05.2009
21 марта 2010, 17:01
Ну, скорее уж просто сделать колесико, мол «запрос обрабатывается, подождите пожалуйста несколько секунд». А % пытаться приделать — не выйдет, т.к. Вы не знаете сколько конкретно времени необходимо на данный запрос.
21 марта 2010, 17:23
Теоретически с помощью одного xmlhttprequest-запроса это невозможно, так как он отдает только четыре состояния. Запрос xmlhttp регулярно отчитывается о своем состоянии через вызов функции xmlhttp.onreadystatechange. Состояние под номером 4 означает конец выполнения, поэтому функция-обработчик при каждом вызове проверяет — не настало ли это состояние. Вообще, список состояний readyState такой: 0 — Unitialized 1 — Loading 2 — Loaded 3 — Interactive 4 — Complete Состояния 0-2 вообще не используются. Вызов функции с состоянием Interactive в теории должен происходить каждый раз при получении очередной порции данных от сервера. Это могло бы быть удобным для обработки ответа по частям, но Internet Explorer не дает доступа к уже полученной части ответа. Firefox дает такой доступ, но для обработки запроса по частям состояние Interactive все равно неудобно из-за сложностей обнаружения ошибок соединения. Поэтому Interactive тоже не используется. После того, как javascript-функция запущена, можно просто вешать гифку и ждать, пока состояние станет 4. Либо можно пойти более серьезным способом и все-таки сделать то, что вы хотите. Но здесь придется изобрести велосипед. При посылке запроса можно параллельно запустит другую функцию с setInterval, в котором запускать, например, каждые полсекунды другой аджакс-запрос. На сервере же сделать еще один файл, в который во время работы основного файла будет записываться количество процентов на данный момент (тоже каждые полсекунды, например), и, пока идет запрос, кушать много раз в сетИнтервале этот файл. Как только первая функция получает искомый ответ, просто выключаете интервал и убираете в display:none счетчик.
Показать Preloader при ожидании запроса в более 500 мс
Думаю, в beforeSend нужно показывать индикатор загрузки, внутри setTimeout . Но что если наступит событие success с командой скрытия индикатора, а затем закончится timeout и индикатор покажется, когда уже не нужен? Прелоадер нужно показывать при загрузке, дольше определённого времени и скрывать, когда пришёл ответ. Кроме того, нужно учитывать, что возможен повторный клик и запуск запроса, также он может быть не успешен. Очевидно что во всех этих случаях timeout должен очиститься и начинаться заново при последнем запросе. Можете ли подсказать алгоритм или пример кода? Или, возможно, есть что то готовое для такого продвинутого вывода индикатора?
Отслеживать
3,847 3 3 золотых знака 19 19 серебряных знаков 35 35 бронзовых знаков
Анимирование ожидания ответа от сервера
Доброго времени суток
сильно не пенайте не давно стал изучать PHP нашел пример
Анимирование ожидания ответа от сервера
но как им воспользоваться не знаю может кто нить разжевать че к чему
с этим понятно
1 2 3 4 5 6 7 8
script src="http://code.jquery.com/jquery-latest.js"> style> /*описание стилей*/ #loadImg тут мой код img id="loadImg" src="img/load.gif" />
а вот что делать с этим мне не ястно
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
$.get("/ajaxtest.php", onAjaxSuccess); // - отправим запрос на сервер startLoadingAnimation(); // - запустим анимацию загрузки function onAjaxSuccess(data) // - функция завершения запроса { stopLoadingAnimation(); // дальнейшая работа с полученными от сервера данными . } function startLoadingAnimation() // - функция запуска анимации { // найдем элемент с изображением загрузки и уберем невидимость: var imgObj = $("#loadImg"); imgObj.show(); // вычислим в какие координаты нужно поместить изображение загрузки, // чтобы оно оказалось в серидине страницы: var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2; var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2; // поменяем координаты изображения на нужные: imgObj.offset(top:centerY, left:centerX); } function stopLoadingAnimation() // - функция останавливающая анимацию { $("#loadImg").hide(); }