Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 17.05.2019
Сообщений: 24
1

preloader

30.04.2020, 15:10. Просмотров 940. Ответов 2
Метки нет (Все метки)

Нажимая на кнопку, данные берутся из открытой базы и подгружаются в блок. Как для этого блока сделать прелоадер, в инете ничего путного не нашел кроме прелоадера для страницы в целом. В js профан, хелпаните, люди добрые.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.04.2020, 15:10
Ответы с готовыми решениями:

Preloader
Есть код <style type="text/css">#hellopreloader>p{display:none;}#hellopreloader_preload{display:...

Preloader для сайта
Как сделать так, чтобы Preloader показывался всего один раз, тоесть при простом обновлении страницы...

Плавное увеличение ширины div (preloader на сайт)
Здравствуйте! Пытаюсь сделать предзагрузчик на сайт. Идея такова: имеется div с нужным background....

Поправить скрипт js с preloader
Добрый день! Есть прелоадер на сайте с кодом: <!-- Preloader --> <div class="preloader"> <div...

2
393 / 146 / 31
Регистрация: 26.11.2019
Сообщений: 385
30.04.2020, 17:06 2
находите в сети любой прелоадер на чистом CSS, задаете ему абсолютное позиционирование над нужным блоком и display: none;, при нажатии на кнопку display: block; , а в запросе к серверу надо прописать в колбэке, что в случае удачного ответа прелоадеру назначается обратно display: none;
0
0 / 0 / 1
Регистрация: 20.05.2017
Сообщений: 33
01.01.2021, 18:29 3
Хороший совет, вот что хочется:
1. Прелоадер-часы на всю страницу *.aspx, на которой отражается результат запроса с группировкой
2. Прелоадер-часы на запрос разгруппировки по выбранному значению из группировочного запроса
Для первой задачи информации достаточно, результат вот такой:
PHP/HTML
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>PreLoad</title>
<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>  
<script type="text/javascript">
$(window).on('load', function () 
{
    var $preloader = $('#p_prldr');
    $preloader.delay(500).fadeOut('slow');    
});
</script>
</head>
 
 <style>
 /*красим класс */
.clock {
  position: absolute;
  top: 50%;
  width: 99%;
  margin: -60px auto 0 auto;
  font-size: 20px;
  font-family: Verdana, Arial, Sans-serif;
  text-align: center;
  color: #fff;
}
.clock ul {
  margin: 0 auto;
  list-style: none;
}
.clock ul li {
  display: inline;
}
.clock ul li#separator {
  -moz-animation: myfade 1s ease infinite;
  -webkit-animation: myfade 1s ease infinite;
}
/* Animation */
@-webkit-keyframes myfade {
  0% {    opacity: 1.0;
  }
  50% {    opacity: 0;
  }
  100% {    opacity: 1.0;
  }   
}
@-moz-keyframes myfade {
  0% {    opacity: 1.0;
  }
  50% {    opacity: 0;
  }
  100% {    opacity: 1.0;
  };
}
html {  height: 100%;
}
body {  background: #1f1f1f;
}
  </style>
 
<body>
<div id="p_prldr" >
</div>  
<div class="clock">
    <img border="0" src="https://www.cyberforum.ru/../HELLO.gif" width="216" height="110" alt ="Hello">
  <ul>
    <li id="hours">00</li>
    <li id="separator">:</li>
    <li id="minutes">00</li>
    <li id="separator">:</li>
    <li id="seconds">00</li>
  </ul>
    <p>Подождите, идет загрузка...</p>
</div>
</body>
</html>
 
<script>
{
  setInterval(function() {    // Seconds
    var seconds = new Date().getSeconds();
    document.getElementById("seconds").innerHTML = (seconds < 10 ? '0' : '') + seconds;
    // Minutes
    var minutes = new Date().getMinutes();
    document.getElementById("minutes").innerHTML = (minutes < 10 ? '0' : '') + minutes;
    // Hours
    var hours = new Date().getHours();
    document.getElementById("hours").innerHTML = (hours < 10 ? '0' : '') + hours;
  }, 1000);
}
//здесь гиперссылка на страницу с группировкой
location.href =('http://netbook:8050/ЖдитеЗапрос.aspx'); 
</script>
А вот со второй задачей сложности - как и какими средствами подгрузить страницу
Часы.htm
PHP/HTML
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Часы</title>
</head>
<script>
{
  setInterval(function() {    // Seconds
    var seconds = new Date().getSeconds();
    document.getElementById("seconds").innerHTML = (seconds < 10 ? '0' : '') + seconds;
    // Minutes
    var minutes = new Date().getMinutes();
    document.getElementById("minutes").innerHTML = (minutes < 10 ? '0' : '') + minutes;
    // Hours
    var hours = new Date().getHours();
    document.getElementById("hours").innerHTML = (hours < 10 ? '0' : '') + hours;
  }, 1000);
}
//через location грузится не обновленная страница
//location.href =('http://netbook:8050/ЖдитеЗапрос.aspx'); - это совсем не надо
</script>
 
 <style>
 /*красим класс */
.clock {  position: absolute;
  top: 50%;
  width: 99%;
  margin: -60px auto 0 auto;
  font-size: 24px;
  font-family: Verdana, Arial, Sans-serif;
  text-align: center;
  color: #FFF;
}
.clock ul {  margin: 0 auto;
  list-style: none;
}
.clock ul li {  display: inline;
}
.clock ul li#separator {  -moz-animation: myfade 1s ease infinite;
  -webkit-animation: myfade 1s ease infinite;
}
/* Animation */
@-webkit-keyframes myfade {
  0% {    opacity: 1.0;
  }
  50% {    opacity: 0;
  }
  100% {    opacity: 1.0;
  }   
}
@-moz-keyframes myfade {
  0% {    opacity: 1.0;
  }
  50% {    opacity: 0;
  }
  100% {    opacity: 1.0;
  };
}
html {  height: 100%;
}
body {  background: #1f1f1f;
}
  </style>
 
<body>
<div class="clock" style="position: absolute; left: 10px; top: 70px; background-color: #FFFFFF; width:1027px">
    <table border="1" width="100%">
        <tr>
            <td>
    <font color="#FFFFFF">
    <img border="0" src="https://www.cyberforum.ru/../HELLO.gif" width="216" height="110" alt="Hello" align="right"></font></td>
            <td>
    <p>&nbsp;Подождите, идет загрузка... </p>
    <ul>
    <li id="hours">00</li>
    <li id="separator">:</li>
    <li id="minutes">00</li>
    <li id="separator">:</li>
    <li id="seconds">00</li>
  </ul>
    </td>
        </tr>
    </table>
 
</div>
</body>
</html>
Сами часы будем выводить во фрейм
PHP/HTML
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master"
 AutoEventWireup="true" 
 CodeBehind="ЖдитеЗапрос.aspx.cs" 
 Inherits="МотельПустошка13.ЖдитеЗапрос" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
.style14
        {            text-align: left;
        }
        #MyFrame
        {            width: 1083px;
            height: 67px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <p>&nbsp;</p>
    <p class="style14">
                    <asp:Label ID="Label2" runat="server" Text="Выберите из списка" 
                        style="text-align: left"></asp:Label>&nbsp;
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                        OnClientClick ="" Text="Button" Visible="False" />
<asp:DropDownList ID="DropDownList1" runat="server"  
                onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
                AutoPostBack="True" DataTextField="ФамилияИмяОтчество" 
                style="margin-left: 0px; text-align: center;" CssClass="style10">
</asp:DropDownList>&nbsp;
<asp:Label ID="Label1" runat="server" Text="0"></asp:Label>
                    </p>
<div style="OVERFLOW: auto;  HEIGHT:160px"  >
    <p>
<asp:GridView ID="GridView1" runat="server" PagerStyle-HorizontalAlign="Right"
            onselectedindexchanged="GridView1_SelectedIndexChanged" 
                        HorizontalAlign="Center" CssClass="style14" >
<PagerStyle HorizontalAlign="Right"></PagerStyle>
</asp:GridView>
     <br />
    </p>
     </div>
    <p>    </p>
 <div>
 <iframe name="MyFrame" id="MyFrame"  class="style40" align="left" 
            frameborder="1" src="http://rmat.ru/ruinformatika" runat="server" 
                width="1080" >
            </iframe>            
</div>
</asp:Content>
Для загрузки [Часы.htm] не годятся, увы, ни DropDownList, ни GridView - только кнопка.
Но DropDownList и GridView нужны, чтобы пользователь видел результаты запроса из СУБД Access (для тех, кого это интересует).
Поэтому в
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
private void Page_Init(object sender, EventArgs e){
            string connStr = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source="
            + Server.MapPath("Мотель_Пустошка.accdb") + ";Persist Security Info=False";
            string commStr = "select * from РейтингДежурныхАдминистраторов Where [Sum-Балл]>0   Order By ФамилияИмяОтчество asc";
            System.Data.OleDb.OleDbConnection conn = new System.Data.OleDb.OleDbConnection(connStr);
            System.Data.OleDb.OleDbCommand comm = new System.Data.OleDb.OleDbCommand(commStr, conn);
            System.Data.OleDb.OleDbDataAdapter DA = new System.Data.OleDb.OleDbDataAdapter(comm);
            System.Data.DataSet DS = new System.Data.DataSet();
            DA.Fill(DS);
            this.GridView1.DataSource = DS;
            this.GridView1.DataBind();
            this.DropDownList1.DataSource = DS;
            this.DropDownList1.DataBind();
            return;}
DropDownList, на мой взгляд, удобный элемент выборки нужного значения из группировочного запроса.
Конечно, можно по запросу сразу выбрать и группу, но тогда файл часы.htm не удасться вывести во фрейм.
Поэтому, используем DropDownList только для обновления фрейма
C#
1
2
3
4
5
6
7
8
9
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
        {
            this.MyFrame.Attributes["src"] = "Advertising/Родигин Леонид Андреевич/Часы.htm";
            this.Button1.Visible = true;
            this.Button1.Text = DropDownList1.Items[DropDownList1.SelectedIndex].Text;
            this.DropDownList1.Visible = false;
            this.GridView1.Visible = false;
            this.Label2.Text = "Для просмотра итогов нажмите кнопку =>";
            return;}
Вообще, для SelectedIndexChanged тоже требуется время, поэтому часы во фрейм загружаются не сразу.
Но для нас более критично время более тяжелого запроса (?) с выводом в GridView по кнопке
C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
protected void Button1_Click(object sender, EventArgs e) {
        string ADM_R = this.Button1.Text;
         string connStr = "Provider=Microsoft.ACE.OLEDB.12.0;Data Source="
            + Server.MapPath("Мотель_Пустошка.accdb") + ";Persist Security Info=False";// Подключаемся к БД
            System.Data.OleDb.OleDbConnection conFLT = new System.Data.OleDb.OleDbConnection(connStr);
            string commFiltDay = "select * from РейтингАдминистраторовЗаДень Where ([ФамилияИмяОтчество]='" + ADM_R + "') Order by Cdate([Дата]) DESC";
            System.Data.OleDb.OleDbCommand com_FLTDay = new System.Data.OleDb.OleDbCommand(commFiltDay, conFLT);
            System.Data.OleDb.OleDbDataAdapter DA_FLTDay = new System.Data.OleDb.OleDbDataAdapter(com_FLTDay);
          System.Data.DataSet DS_FLTDay = new System.Data.DataSet();
            DA_FLTDay.Fill(DS_FLTDay);
            this.GridView1.DataSource = DS_FLTDay;
            this.DataBind();
            this.Label1.Text = ADM_R;
            if (this.Label1.Text != "0")
            {
                this.MyFrame.Attributes["src"] = "http://rmat.ru/ruinformatika";
                this.Button1.Visible = false;
                this.DropDownList1.Visible = true;
                this.Label2.Text = "Выберите из списка =>";
                this.GridView1.Visible = true;
            }
            return;}
Когда кликаем DropDownList, выводится приглашение нажать кнопку расшифровки группировки и
во фрейме начинают тикать часы.
Чтобы остановить часы при старте страницы обнуляем label1
C#
1
2
3
protected void Page_Load(object sender, EventArgs e)
        {            this.Label1.Text = "0";
        }
Теперь, когда запрос Button1_Click прогрузится,
в label1 появится выбранное из DropDownList1 значение и во фрейме появится первоначальная страница.
Конечно, все это работает, но такое ощущение, что чешу левое ухо правой рукой через затылок.
Хотя, если солнце всходит и заходит, в программе солнцеворота ничего менять не надо
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.01.2021, 18:29

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Не правильная работа preloader
на сайте есть preloader jquery на сайте подключен 3.2.1 версия html в начале страницы: &lt;div...

Preloader background cookies
надеюсь что раздел выбрал верно , так как в задаче используется jQuery, подобной темы не нашел,...

Preloader для части страницы
Структура страницы такова: - Имя сайта - Меню - Контент Прелоадер загораживает сразу всю...

Что делать с preloader-ом, если запрос произошёл слишком быстро?
Что делать с preloader-ом, если запрос произошёл слишком быстро? Ну, например, есть у меня корзина...

Не работает Preloader
Доброго времени суток форумчане! Когда создаю preloader, он работает, но перед его появлением...

Preloader не прелоадит
Прошу помочь разобраться. Для громоздкой страницы (конструктор Adobe Muse) нужен прелоадер....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.