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

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

Курсы

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 | Загрузок: 3697
Бесплатные курсы

Категории: 

Теги: , ,

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

Рейтинг: 8.5/10 (54)

Схожие по тегам статьи

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

    Алексей

     

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

    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();
    }

 

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