Загрузка изображения, когда я нажимаю кнопку в jquery/javascript

-2

Когда я нажимаю кнопку, она будет переходить на другую страницу, прежде чем загрузка страницы полностью я хочу показать загрузочное изображение gif. (Без использования Ajax)Загрузка изображения, когда я нажимаю кнопку в jquery/javascript

источник

2013-12-18 user1225946

wht u попытался ????? – rynhe

решает ли ваш вопрос мой ответ? – Ravimallya

первых сразу после тега тела добавить следующее:

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
</div>

Затем добавьте класс стиля для DIV и изображений на ваш CSS:

#loading { 
width: 100%; 
height: 100%; 
top: 0px; 
left: 0px; 
position: fixed; 
display: block; 
opacity: 0.7; 
background-color: #fff; 
z-index: 99; 
text-align: center; 
} 

#loading-image { 
position: absolute; 
top: 100px; 
left: 240px; 
z-index: 100; 
}

и, наконец, добавить JavaScript на страницу (стр referably в конце Вашей страницы, перед закрытием тега тела, конечно):

$(window).load(function() { 
    $('#loading').hide(); 
});

источник

2013-12-18 06:50:56 Ravimallya

Это то, что я сделал

1.) Установите Div тег над телом и дать ему идентификатор «страницы».
2.) После этого поместите тег div рядом с тегом div 'page' и дайте ему идентификатор 'load'.

<div id="page"> 
    <body> 
     //whatever you page code is 
    </body> 
</div><div id="loading"></div>

3.) Настройка CSS.

<style type="text/css"> 
    #page  {display: block;} 

    #loading {display: none; 
       position: absolute; 
       top: 0; 
       left: 0; 
       z-index: 100; 
       width: 100vw; 
       height: 100vh; 
       background-color: rgba(255, 255, 255, 0.5); 
       background-image: url('../Images/nameofgifimage.gif'); 
       background-repeat: no-repeat; 
       background-position: center;} 
</style>

4.) Наконец, настройте свой JQuery. Я использую VB.net, поэтому для ID мне нужно было получить ClientID.

<script type='text/javascript' src="../Scripts/jquery-1.4.1.min.js"></script> 
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="../Scripts/jquery.maskedinput.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#<%= btnSearch.ClientID %>").click(function() { 
      $('#loading').show(); 
      return true; 
     }); 
    }); 

</script>

Если это не поможет вам, сообщите мне, и я попытаюсь выяснить, что не так.

источник

2016-05-26 16:36:57 BMantle

Загрузка изображения, когда я нажимаю кнопку в jquery/javascript

ответ

Смежные вопросы