js Подгрузка контента без перезагрузки страницы 

Дата публикации  Дата изменения31.01.13  Комментарии35   Просмотры31932

Курсы

Ajax, просто и практично, ничего лишнего. Контент может быть любой: статичный, динамичный, текст, картинки, флэш, видео, аудио. Может послужить основой небольшого сайта.

Пример использования:

Между <head></head>:

<script> 
    function showContent(link) { 
        var cont = document.getElementById('content'); 
        var loading = document.getElementById('loading'); 
        cont.innerHTML = loading.innerHTML;   
        var http = createRequestObject(); 
        if( http )  
        { http.open('get', link); 
            http.onreadystatechange = function ()  
            {   if(http.readyState == 4)  
                {   cont.innerHTML = http.responseText;  }    } 
            http.send(null);  } 
        else  
        {  document.location = link;   }   } 
    // ajax объект
    function createRequestObject()  
    {  try { return new XMLHttpRequest() } 
        catch(e)  
        {  try { return new ActiveXObject('Msxml2.XMLHTTP') } 
            catch(e)  
            {   try { return new ActiveXObject('Microsoft.XMLHTTP') } 
                catch(e) { return null; }   } } } 
</script>

Между <body></body>:

<a href="#" onClick="showContent('page1.html')">Страница 1</a>
<a href="#" onClick="showContent('page2.html')">Страница 2</a>
<!--//-->
<div id="content">
    <!-- CONTENT -->
</div> 
<!--//-->
<div id="loading" style="display: none"> 
    Идет загрузка... 
    </div> 
 <script>
showContent('page1.html') // страница по умолчанию
</script>

  Размер:  6,61kB | Изменен: 31.01.13 | Загрузок: 2121
Бесплатные курсы

Категории

Теги: , ,

Оцените материал:

Рейтинг: 8.2/10 (36)


КомментарииКомментарии:

    Алексей

     

    Добрый день. Не подскажите как сделать плавную подгрузку контента? не очень красиво смотрится, когда тебе резко выводят контент, хочется добавить плавности появлению. Заранее спасибо)

    coder hol es /* Админ */

     

    Здравствуйте! Если правильно понял — посмотрите: _http://i-notes.org/plavnoe-poyavlenie-kontenta/, _http://www.rudebox.org.ua/rudebox-plavnaya-zagruzka-saita/

    Pllay

     

    Добрый день, подскажите как сделать так что бы подгружаемый контент подгружался с задержкой например 0.5 сек. Что бы 0.5 сек крутился прелоадер .gif а затем уже подгружался контент, так сказать для визуализации подгрузки.

    coder hol es /* Админ */

     

    Здравствуйте! Попробуйте так:
    <script>
    function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() – start) > milliseconds){
    break;
    }
    }
    }
    function showContent(link) {
    var cont = document.getElementById('content');
    var loading = document.getElementById('loading');
    cont.innerHTML = loading.innerHTML;
    var http = createRequestObject();
    if( http )
    { http.open('get', link);
    http.onreadystatechange = function ()
    { if(http.readyState == 4)
    {cont.innerHTML = loading.innerHTML;sleep(500);cont.innerHTML = http.responseText; } }
    http.send(null); }
    else
    { document.location = link; } }
    // ajax объект
    function createRequestObject()
    { try { return new XMLHttpRequest() }
    catch(e)
    { try { return new ActiveXObject('Msxml2.XMLHTTP') }
    catch(e)
    { try { return new ActiveXObject('Microsoft.XMLHTTP') }
    catch(e) { return null; } } } }
    </script>
    Заместо "Идет загрузка" поставьте желаемый gif. Можно еще попробовать через setTimeout.

    Дмитрий

     

    А не проще ли сделать так
    function acc_page(a) {
    show_loader();
    $.post('php страница с вариантами страниц','acc='+a,function(data){

    $("#acc_content").html(' ').html(data.html);

    hide_loader();
    },'json'); }

    function show_loader(){
    $('#modal_bg_loader').fadeIn(1);
    $('#glob_loader').fadeIn(1);
    }
    function hide_loader(){
    $('#modal_bg_loader').hide();
    $('#glob_loader').hide();
    }


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые