Помогите с ajax подгрузкай новостей

На сайте контент выводится с помощью custom. При такой реализации вывода новостей возможно сделать кнопку подгрузки новостей (на подобии "Добавить еще") при нажатии на которую добавятся еще новости??

 

можно! какие варианты пробовал? или ни один из тех кто есть не работает?

 

Пробовал вариант от сандера, но там не так реализовано и работает туго

 

т.е. не ТАК и ТУГО?

 

Подтормаживало и было сделано не на ajax

Контент не подгружался ниже а перелистывалась станица без обновления страницы

Вот такую реализацию хотелось бы

Спойлер

http://demo.mekshq.com/?theme=voice&mks_switch=exit

 

@Winston?!, в шаблоне redfilm реализовано так:
это в js файл

Код:

.on('click', '.navigation-button a', function() {
    var nextBtn = $(this),
    nextPage = $(this).attr('href');
    if( !$(this).attr('id') && !$(this).attr('onclick') ) {
        nextBtn.css({'text-indent':'-9999px'}).animate({height:3,backgroundColor:'#eee',border:0,width:'100%'},'fast',function(){
            $(this).append('<span></span>').children('span').animate({width:'50%'},'slow');
            if ( nextPage ) {
                $.get(nextPage,{},function(data){
                    nextBtn.children('span').animate({width:'100%'},'slow',function(){
                        $($('#dle-content').length>0?'#dle-content':'#content').append($('.shortfilm', data)).append($('#navigation', data));
                        if($('.shortfilm.always-open').length>0) {
                            $('.shortfilm .always .fa').removeClass('fa-circle').addClass('fa-check-circle');
                            $('.shortfilm').addClass('always-open');
                        }
                        nextBtn.parents('#navigation').remove();
                    });
                });
            }
        });
        return false;
    }
})

это navigation.tpl

HTML:

<div id="navigation">
    <div class="clr"></div>
    [not-aviable=search]
    <div class="navigation-button">
        [next-link]Показать еще <i class="fa fa-angle-double-down right"></i>[/next-link]
    </div>
    [/not-aviable]
    [aviable=search]
    <div align="center">
        <div class="navigation-button" style="display:inline-block">
            [prev-link]<i class="fa fa-angle-double-left left"></i> Предыдущие[/prev-link]
        </div>
        <div class="navigation-button" style="display:inline-block">
            [next-link]Следующие <i class="fa fa-angle-double-right right"></i>[/next-link]
        </div>
    </div>
    [/aviable]
</div>

это shortstory.tpl

HTML:

<div class="item shortfilm">
    <div class="poster">
        <img src="{image-1}" alt="{title}" />
        <div class="overlap">
            <i class="fa fa-play-circle"></i>
            <i class="fa fa-info-circle"></i>
            <span class="always"><i class="fa fa-circle"></i> открывать всегда</span>
        </div>
        <div class="about">
            <div class="title">
                [xfgiven_year]<span>[xfvalue_year]</span>[/xfgiven_year]
                {title}
            </div>
            <div class="genre">{category}</div>
            <div class="text">
                {short-story limit="300"}...
            </div>
        </div>
    </div>
    <div class="info">
        <div class="title">
            <a href="{full-link}" class="title" title="{title}">{title}</a>
        </div>
        <div class="year" title="[xfgiven_year][xfvalue_year][xfgiven_country], [/xfgiven_country][/xfgiven_year][xfgiven_country][xfvalue_country][/xfgiven_country]">
            [xfgiven_kinopoisk]<span><i class="fa fa-star-o"></i> [xfvalue_kinopoisk]</span>[/xfgiven_kinopoisk]
            [xfgiven_year][xfvalue_year][xfgiven_country], [/xfgiven_country][/xfgiven_year][xfgiven_country][xfvalue_country][/xfgiven_country]
        </div>
        <div class="genre" title="{category}">
            {link-category}
        </div>
    </div>
</div>

думаю по аналогии если сделать - должно будет получиться

 

скрипт можно же в любой js файл добавить?

 

да, в любой который загружается на странице

 

@byroot не подскажешь как сделать, чтобы контент на странице не сразу загружался, а постепенно (при скроллинге). Пример - https://lifehacker.ru/

 

на сайте только картинки загружаются постепенно, обычно это делается скриптом lazyload (но есть наверное и другие скрипты для этого).

 

От души) И снова спасибо