jquery preloader только для содержимого div

Я создаю веб-сайт, и я хочу показать предварительный загрузчик до того, как страница будет загружена и готова к отображению на экране.jquery preloader только для содержимого div

Я нашел много плагинов, чтобы сделать это, но они работают только тогда, когда они предназначены для всего WebSite. Я хочу сделать это только при загрузке содержимого внутри определенного ID Div. Проблема заключается в том, что содержимое этого div вызывается на основе щелчка меню, а прелоадер не работает.

Это мой HTML для страницы:

<body> 
<div class="head"> 
    <ul> 
     <li><a href="home">Home</a></li> 
     <li><a href="service">Service</a></li> 
     <li><a href="about">About</a></li> 
     <li><a href="contact">Contato</a></li> 
    </ul> 
</div> 

<div id="ip-container" class="ip-container"> 
    <!--some other codes in here --> 

    <div id="content"><!-- content ajax --> 

    </div><!-- /content ajax --> 

</div><!-- /container --> 
</body>

Я хочу, чтобы показать прелоадер только тогда, когда пользователь нажимает на меню и #content DIV загружается с его содержимым.

И это Jquery я использую для вызова содержания:

$(document).ready(function(){ 

    $('#content').load('content/home.php'); 
    $('.head').on('click', 'li a', function() { 

     var page = $(this).attr('href'); 
     $('#content').load('content/' + page + '.php'); 
     return false; 
    }); 
});

Как я могу это сделать?

источник

2014-09-24 celsomtrindade

Вы в основном ищете что-то вроде «загрузка, пожалуйста, подождите ...» диалоговое дисплей типа, который исчезает, когда содержимое загружается? –

Да, или gif, что-то вроде этого. Но проблема в том, что я не могу сделать это, когда я нажимаю меню, а содержимое div загружает страницу в этот div. Например: если я нажму, «Подождите, подождите», пока не будет загружен контент из содержимого «content/about.php», то есть для всех других меню. Я уже сделал что-то вроде этой работы, но только когда я впервые загрузил веб-сайт, после этого ничего не происходит. – celsomtrindade

Load method предложение событие успеха:

$('.loader').show(); // Show the loader here 
        // $('#content').prepend('<div class="loader"... 
$('#content').load('content/' + page + '.php', function() { 
    alert('Loading complete!'); 
    $('.loader').hide(); // And hide it 
});

Цель для вас, чтобы создать загрузчик DIV в исправном элемент :)

Загрузчик установки до размера DIV:

setTimeout(function() { $('.loader').show(); }, 1000); 
 
setTimeout(function() { $('.loader').hide(); }, 4000);

#content { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: gray; 
 
    position: relative; /* important */ 
 
} 
 

 
.loader { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: rgba(255,255,255,0.8) url(http://googl-url-shortener.googlecode.com/files/spin_24x24_loading.gif) center center no-repeat; 
 
    z-index: 1000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="content"><div class="loader"></div></div>

источник

2014-09-24 17:29:12

Хорошо, я думаю, что я почти там. поле предупреждения работает, но загрузка gif отсутствует. Я попытался что-то сделать внутри div .load, но у меня тоже этого нет. это мой файл script.js http://pastebin.com/0PMFDmhs, правильно? (я думаю, что это так) – celsomtrindade

Нет, это не так. Без редактирования html (просто добавьте правило '.loader') вы должны отредактировать js на [this one] (http://jsfiddle.net/06svs96L/) –

, но я использую css и div .loader в html, как и раньше. Но ничего не работает. – celsomtrindade

setTimeout(function() { $('.loader').show(); }, 1000); 
 
setTimeout(function() { $('.loader').hide(); }, 4000);

#content { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: gray; 
 
    position: relative; /* important */ 
 
} 
 

 
.loader { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    background: rgba(255,255,255,0.8) url(https://gelinavillage.gr/images/layout/preloader.gif) center center no-repeat; 
 
    z-index: 1000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="content"><div class="loader"></div></div>

источник

2017-04-21 23:04:14 RollzRoyce

Что нового вы сделали в этом коде? только bg? –

jquery preloader только для содержимого div

ответ

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