How to apply django lazy loading to load my comments?

Question

I am tried but i am not getting the desired output for lazy loading

views.py

def post_detail(request, pk):
    post = get_object_or_404(Post, pk=pk)
    content_type = ContentType.objects.get_for_model(Post)
    obj_id = post.id
    comments = Comment.objects.filter(
    content_type=content_type, object_id=obj_id)
    parent_id = request.POST.get("parent_id")
    csubmit = False
    if parent_id:
        content_type = ContentType.objects.get_for_model(Comment)
        Comment.objects.create(content_type=content_type, 
        object_id=parent_id,
                           parent_id=parent_id,
                           user=request.user,
                           text=request.POST.get("text"))
    if request.method == 'POST':
        form = CommentForm(data=request.POST)
        if form.is_valid():
        new_comment = form.save(commit=False)
        new_comment.content_type = content_type
        new_comment.user = request.user
        new_comment.save()
        csubmit = True
    else:
        form = CommentForm()

    paginator = Paginator(comments, 10)
    try:
        comments = paginator.page(page)
    except PageNotAnInteger:
        comments = paginator.page(1)
    except EmptyPage:
        comments = paginator.page(paginator.num_pages)

    return render(request, 'post_detail.html', {'post': post, 
    'comments': comments, 'csubmit': csubmit, 'form': form})

I want to apply lazy loading in the above view and want to apply on template.Above i added pagination and rendered in template

post_details.html

 {%for comment in comments %}
     <br>
 {{comment.text}}<br/>
    by {{comment.user}}<br>
      <a href='#' class="rep_cmt" data-parentid=" 
 {{comment.id}}">Reply</a><br>
       {% for comment in comment.children.all %}
       {{comment}}
    {% endfor %}
 {%endfor%}
 {% if comments.has_next %}
<a class="infinite-more-link" href="?page={{ comments.next_page_number
}}">More</a>
{% endif %}

 <div class="loading" style="display: none;">
  Loading...
 </div>
<script>
    var infinite = new Waypoint.Infinite({
      element: $('.rep_cmt')[0],
      onBeforePageLoad: function () {
        $('.loading').show();
      },
      onAfterPageLoad: function ($items) {
        $('.loading').hide();
      }
    });
  </script>

In above i added script to render data in lazy loading process but it is not rendering