Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Простой preloader с GIF анимацией

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Наши фиксики уже делают все, чтобы сайт открылся в течение 2 секунд.
Данная модификация позволит сообщить пользователю о загрузке сайта и понизить уровень отказов.
Сделайте небольшую заглушку при загрузке страниц для того, чтобы пользователь не видел белый экран.
Подскажите пользователю, что все идет по плану.
Данная модификация будет работать как на мобильной версии сайта, так и на десктоп версии сайта. По желанию можно включить на всех страницах.
Как это выглядит?
В данной модификации можно поставить любую фотографию/GIF и текст
Как это добавить?
Первый шаг
Создаем Zero Block, задаем 100% Windows container height. Добавляем IMAGE, загружаем любую понравившуюся GIF с загрузкой. При желании добавляем текст.
Второй шаг
Постоянное отображение
Создаём блок T123 и помещаем стили, которые даны ниже.
#rec640765940 в коде меняем на свои значения. Чтобы узнать #rec, перейдите к Zero блоку, нажмите настройки и пролистайте в самый низ.
Постоянно показываем Preloader после обновления страницы.

<!--Взято с сайта https://digistudio.su/prostoj-preloader-s-gif-animaciej-->

<style>
#rec640765940 {
  position: fixed;
  left: 0;
  top: 0;
  right:0;
  bottom:0;
  z-index: 100005;
}
</style>
<script>
$("body").css("overflow","hidden");
$(document).ready(function() {
    setTimeout(function() {
        $("#rec640765940").delay(350).fadeOut('slow'); 
        $("body").css("overflow","");
        window.dispatchEvent(new Event('resize'));
    }, 3000);
});
$(window).on('load', function () {
    $("#rec166025753").delay(350).fadeOut('slow');
    setTimeout(function() {  
    $("body").css("overflow",""); 
    window.dispatchEvent(new Event('resize'));    
    }, 400);
});
</script>
Второй шаг
Повтор после определенного времени
Создаём блок T123 и помещаем стили, которые даны ниже.
#rec640765940 в коде меняем на свои значения. Чтобы узнать #rec, перейдите к Zero блоку, нажмите настройки и пролистайте в самый низ.
Показываем Preloader после того, как пройдет определенный промежуток времени

<!--Взято с сайта https://digistudio.su/prostoj-preloader-s-gif-animaciej-->

<style>
#rec640765940 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
let minutsLimit = 60; //Пауза в минутах
let ZeroPrl = $("#rec640765940");
let curentDate = new Date();
let diffDate;
if(ZeroPrl.length){
let prevTime = new Date(localStorage.getItem('beforeDate'));
if (prevTime) diffDate = +((curentDate.getTime() - prevTime.getTime())/60000).toFixed(2);
if (prevTime == null || diffDate>minutsLimit ) {
    localStorage.setItem('beforeDate', curentDate);     
    $('body').css('overflow','hidden');
    $(document).ready(function() { setTimeout(function() {hidePreloader()}, 3000)});
    $(window).on('load', function () { hidePreloader()});
}else{
    ZeroPrl.hide();
    $("body").css("overflow","");
};
function hidePreloader(){
    setTimeout(function() {
        ZeroPrl.delay(500).fadeOut('slow');
        $('body').css('overflow','');
        window.dispatchEvent(new Event('resize'));
    }, 1000);
};
};
</script>
Второй шаг
Отображать только один раз
Создаём блок T123 и помещаем стили, которые даны ниже.
#rec640765940 в коде меняем на свои значения. Чтобы узнать #rec, перейдите к Zero блоку, нажмите настройки и пролистайте в самый низ.
Показываем Preloader только один раз при загрузке сайта.

<!--Взято с сайта https://digistudio.su/prostoj-preloader-s-gif-animaciej-->

<style>
#rec640765940 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
let ZeroPrl = $("#rec640765940");
if(ZeroPrl.length){
$("body").css("overflow","hidden");
let secondTime = false;
if ( localStorage.getItem('dontLoad') == null) {
  localStorage.setItem('dontLoad', 'active');  
  secondTime=true;  
}else{
    ZeroPrl.hide();
    $("body").css("overflow","");
};
function hidePreloader(){
    setTimeout(function() {
        ZeroPrl.delay(500).fadeOut('slow');
        $("body").css("overflow","");
        window.dispatchEvent(new Event('resize'));
    }, 1000);
};
if(secondTime){
$(document).ready(function() { setTimeout(function() {hidePreloader()}, 3000)});
$(window).on('load', function () { hidePreloader()});
};
};
</script>
Как Вам модификация?
Made on
Tilda