Приблизительно так:
Код view:
def projects_list_view(request):
projects_per_page = 9
projects = Project.objects.language(request.LANGUAGE_CODE).all().order_by('order').select_related('customer')
paginator = Paginator(projects, projects_per_page)
page = request.GET.get('page')
try:
projects = paginator.page(page)
except PageNotAnInteger:
projects = paginator.page(1)
except EmptyPage:
if request.is_ajax():
return HttpResponse('')
projects = paginator.page(paginator.num_pages)
if request.is_ajax():
return render(request, 'projects/_list_ajax.html', {'projects': projects})
return render(request, 'projects/_list.html', {'projects': projects, 'seo': seo,
'page_description': page_description})
Код шаблона _list.html:
<div class="row" id="project_list">
{% include 'projects/project_list_ajax.html' %}
</div>
<div class="row" id="preloader">
.....
</div>
<div class="row">
<div class="col m12 s12 center-align">
<button class="btn waves-effect waves-light" id="lazy_more">
{% trans 'More projects' %}
</button>
</div>
</div>
Код шаблона _list_ajax.html:
{% for project in projects %}
<div class="col m4 s12">
<div class="card large sticky-action">
<div class="card-image waves-effect waves-block waves-light">
{% if project.image %}
<img src="{{ project.image.url }}" class="activator" alt="{{ project.title }}">
{% endif %}
</div>
<div class="card-content">
<h4 class="card-title activator">
{{ project.title }}
<i class="material-icons right">more_vert</i>
</h4>
<div class="card-customer">
<h6>{{ project.customer.title|upper }}</h6>
<span>{{ project.customer.description }}</span>
</div>
</div>
<div class="card-reveal">
<h4 class="card-title">
{{ project.title }}
<i class="material-icons right">close</i>
</h4>
{{ project.description }}
</div>
</div>
</div>
{% endfor %}
Код js:
var page = 1;
var empty_page = false;
var block_request = false;
$('#lazy_more').click(function (e) {
e.preventDefault();
if (empty_page === false && block_request === false) {
block_request = true;
page += 1;
$('#preloader').show();
$.get('?page=' + page, function (data) {
$('#preloader').hide();
if (data === '') {
empty_page = true;
} else {
block_request = false;
$('#project_list').append(data);
}
});
}
});
"Lazy load" реализовывал как пагинацию сделаную на django. При первом запросе рендериться основной шаблон с инклудом _list_ajax.html в который передаются данные, которые необходим отрендерить. При нажатии кнопки "Больше" - отправляется get ajax запрос с номером следующей страницы - если она есть то в ответе приходит отрендеренный шаблон _list_ajax.html - который вставляется в соответсвующий блок.
Надеюсь поможет :)