Как сделать прелоадер? Прелоадер для сайта на JavaScript с выводом процентов.
HTML-код
- Опубликовано: 29 сен 2024
- Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to...
Друзья!
В этом видео простой и эффективный пример прелоадера с выводом процентов (прогресс/статус загрузки сайта) на JavaScript.
Код из видео: github.com/avi...
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети
Главный минус этого скрипта в том, что после кеширования изображений, событие onload не отработает и весь основной функционал, прелоадер никогда не исчезнет. Поможет дополнительное условие if (file.complete) { render percent code... }
Классно 👍 правда классно,удачи автору
Здравствуйте, прошу ответьте, как сделать прелоадер на загрузку всех изображений прямо из папки ИЛИ на загрузку всех background! Прошу ответьте кто-нибудь потому что я тупо не могу найти как это сделать!
время ток потерял) лодер крутится процент не идёт, хорошо что на гитхабе код брал) если бы ещё в ручную писал то вообще плевался бы)
Загадка века. Код в видео работает - копируешь себе, а он уже не работает.
Процентная загрузка не идет и сам прелоадер не исчезает.
Может кто сталкивался с похожей проблемой?
За видео спасибо!
@@AVISTV спасибо !
@@AVISTV Бро всё круто но onload не работает, то есть не работает код внутри функции onload. Я использую Chrome
Круто, но как говорится совершенству нет предела)
Было бы ещё круче если бы процентики набегали)
В смысле динамично, от 1 до 100, а не такими резкими скачками)
@@AVISTVжаль, что код уже удален. Я б тоже посмотрел
Мне пришла идея только с модификацей кода из видео. При получении статичного процента запускать счетчик через setInterval (анимацию), до этого статичного значения. Но своеобразные скачки все равно будут..
в коде есть недостатки высота не выстраиватеся на всю, второе загрузка картинок виснет на 40% процентах, бывает, вообще 93.3, консоль ошибок не выдает
Попался в реках, как раз когда учу js сейчас
Привет, на каком js фреймворке работаешь? Если не секрет?)
@@AVISTV крутяк) планируешь видео про вью делать? Было бы супер
Мужик, ты супер! Топ - канал!
Получается полная хрень, если на сайте одно фото или вовсе их нет!!!
Ну так надо и такие кейсы обрабатывать)
Годно :)
Шикарно
Аттдуши, 3 спинер делаю по твоему гайду
как это переложить на django?
Как скачать стили с сайта? Там региться надо? Куда так торопишься, ниче не понятно
огромное спасибо за гайд по прелоадеру, подписался-лайк ) надеюсь не забросил канал ? с такой крутой и подробной подачей материала обязан быть результат по просмотрам. Еще раз спасибо )
Крутой видос с чипсами и колой пойдет
суперкласс! всё получилось👌
Большое спасибо!
Можно ли сделать прелоадер на время загрузки JS скриптов? В этих скрпитах идёт вопрос API серверу, который отвечает, а скрипт должен это всё обработать и вывести информацию, на что требуется время и пока информации нет, текст просто пустует до того момента, пока не загрузится. Можно ли сделать прелоадер на время загрузки?
@@AVISTV, ну попробую. Мне просто говорили, что это нереально, только timeout ставить
@@AVISTV, я всё изучил, но либо я тупой, либо я тупой, ибо ничего не понял .-.
Было очень полезно! Спасибо!
почему-то до 100 не загружается((
загружается до 100. Просто там ошибка в css в transition надо поставить 0.9s , а не .09s
А, еще в html картинка последняя с битой ссылкой. Если ее удалить, то все работает. Это видно в консоли
а где код не могу найти
@@AVISTV 404 ошибка
@@AVISTV помоги пожалуйста столкнулся с такой проблемой то что прелоадер не проподает , тип страница загрузилась а кружок все еще крутится в чем проблема ?
Дам ну это работает в том случае если изображения заданы в разметке, а если их в стилях задаём? Сработает ли в таком случае если мы соберём в массив элементы на которых изображения или так не работает?
Мал я так скажем ещё на знаю всех глубин и тонкостей
@@AVISTV спасибо мне не помогло но все же
Пришел с новой инфой по поводу фона. Если я правильно понимаю то можно вот в этот код впихнуть бэкраунд для взятия картинки и уже сделать то же самое что и в видео с процентами но слегка в другой форме
var img = new Image();
img.src = 'site.com/img.jpg';
if(img.complete)}
@@AVISTV нет. Ну или я пытался их использовать не так как правильно
Но я нашел вот такую информацию: Но здесь есть подводный камень. Если после стилей у нас есть скрипт, то этот скрипт должен дождаться, пока загрузятся стили:
Круто. Если какое-то изображение не скачается - не повиснет лоадер?
Transition: all - не рекомендую, лучше все таки указывать свойства, которые будут плавно изменяться.