Задать вопрос
metr0
@metr0
javascript

Как заставить скрипт, остановиться?

Всем привет, есть Вот такой скрипт, это прелоадер для сайта, но у меня вопрос, как заставить его остановиться, когда страница загружена?

Вот кусок кода самого скрипта 
(function($) {
    var defaults = {
        position: 'bottom',
        height: '5px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200
    }
    $.materialPreloader = function(options) {
        var settings = $.extend({}, defaults, options);
        $template =
            "<div id='materialPreloader' class='load-bar' style='height:" +
            settings.height + ";display:none;" + settings.position +
            ":0px'><div class='load-bar-container'><div class='load-bar-base base1' style='background:" +
            settings.col_1 +
            "'><div class='color red' style='background:" + settings.col_2 +
            "'></div><div class='color blue' style='background:" +
            settings.col_3 +
            "'></div><div class='color yellow' style='background:" +
            settings.col_4 +
            "'></div><div class='color green' style='background:" +
            settings.col_1 +
            "'></div></div></div> <div class='load-bar-container'><div class='load-bar-base base2' style='background:" +
            settings.col_1 +
            "'><div class='color red' style='background:" + settings.col_2 +
            "'></div><div class='color blue' style='background:" +
            settings.col_3 +
            "'></div><div class='color yellow' style='background:" +
            settings.col_4 +
            "'></div> <div class='color green' style='background:" +
            settings.col_1 + "'></div> </div> </div> </div>";
        $('body').prepend($template);
        this.on = function() {
            $('#materialPreloader').fadeIn(settings.fadeIn);
        }
        this.off = function() {
            $('#materialPreloader').fadeOut(settings.fadeOut);
        }
    }
}(jQuery));
  • Вопрос задан
  • 248 просмотров
Комментировать
Подписаться 2 Оценить Комментировать
Решения вопроса 1
PretorDH
@PretorDH
HTML5, CSS3, PHP, JS - люблю в чистом виде.
В файле HTML должно быть:
<html>
<head>
...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="materialPreloader.js"></script>
<link rel="stylesheet" type="text/css" href="css/materialPreloader.css"> 
<script type="text/javascript">
jQuery(document).ready(function($) {
    preloader = new $.materialPreloader({
        position: 'top',
        height: '5px',
        col_1: '#159756',
        col_2: '#da4733',
        col_3: '#3b78e7',
        col_4: '#fdba2c',
        fadeIn: 200,
        fadeOut: 200
    });
    $(window).on('load', function(){console.log('BlaBla'); preloader && preloader.off();});
    preloader.on();
    setTimeout(preloader.off,9000);
});
</script>
Ответ написан
33 комментария
33 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Рефакторинг vue.js/nest.js интерфейса у админки
22 нояб. 2024, в 15:50
150000 руб./за проект
Разработать индикатор для торговой платформы Metatreder5
22 нояб. 2024, в 15:00
2500 руб./в час
Разработка базы данных на SQL
22 нояб. 2024, в 14:51
10000 руб./за проект
Ещё заказы