Lazy Load Script Django.How

For example i will use news app.

To install Lazy Load script first of all need to import some django modules. In views.py add 2 rows on the top:


from django.http import JsonResponse
from django.template.loader import render_to_string

2.In page function, before return, we need to make check if request ask for lazy load or not.


if request.method == "GET" and "lazy_load" in request.GET:
    lazy_html = render_to_string('news/parts/_list.html', context, request)
    return JsonResponse({'html':lazy_html})
else:
    return render(request, 'news/index.html', context)

This page must have pagination!!!

Prepare html template. List of news must be in another file without conection of header and footer. In this example i made file ‘_list.html’:

<br /> {% if news %}<br /> {% for post in news %}<br /> {% if post.post_type == 'ph' %}<br /> <br /> {% if post.post_photo %}<br /> <img decoding="async" src="{{ post.post_photo.url }}" alt="{{ post.title }}" class="img-responsive"><br /> {% endif %}</p> <div class="m-v-2"> <a href="{% url 'post' post.id %}" class="font-weight-400 black h5 text-uppercase">{{ post.title }}<br /> </a></p> <div class="m-v-05"> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,19V8H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M7,10H9V12H7V10M15,10H17V12H15V10M11,14H13V16H11V14M15,14H17V16H15V14Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400">{{ post.post_date | date:"d M Y" }}</p> <p class="d-inline dark">/</p> <p> <a href="#"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.author }} </p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" /> </svg></p> <p> {% for cat in post.categories.all %}{% if forloop.counter0 > 0 %},{% endif %}<br /> <a href="{% url 'category' cat.id %}" class="d-inline dark italic small font-weight-400">{{cat}}</a><br /> {% endfor %}</p> <p class="d-inline dark">/</p> <p> <a href="{% url 'post' post.id %}#comments"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.comments_count }} Comments</p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"> </path> </svg> </div> <p class="font-weight-400 dark m-v-1"> {{ post.preview_text }} </p> <p> <a href="{% url 'post' post.id %}" class="color-1 italic font-weight-400"><u>Read More</u></a> </div> <hr class="m-v-3"> <br /> {% elif post.post_type == 'vd' %}<br /> </p> <div clas="m-v-3"> {% if post.video_url %}<br /> <iframe width="100%" height="600" src="{{ post.video_url }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="m-v-1"><br /> </iframe><br /> {% endif %}</p> <div class="m-v-1"> <a href="{% url 'post' post.id %}" class="font-weight-400 black h5 text-uppercase">{{ post.title }}<br /> </a></p> <div class="m-v-05"> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,19V8H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M7,10H9V12H7V10M15,10H17V12H15V10M11,14H13V16H11V14M15,14H17V16H15V14Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400">{{ post.post_date | date:"d M Y" }}</p> <p class="d-inline dark">/</p> <p> <a href="#"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.author }} </p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" /> </svg><br /> {% for cat in post.categories.all %}{% if forloop.counter0 > 0 %},{% endif %}<br /> <a href="{% url 'category' cat.id %}" class="d-inline dark italic small font-weight-400">{{cat}}</a><br /> {% endfor %}</p> <p class="d-inline dark">/</p> <p> <a href="{% url 'post' post.id %}"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.comments_count }} Comments</p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M18,14.5V11A1,1 0 0,0 17,10H16C18.24,8.39 18.76,5.27 17.15,3C15.54,0.78 12.42,0.26 10.17,1.87C9.5,2.35 8.96,3 8.6,3.73C6.25,2.28 3.17,3 1.72,5.37C0.28,7.72 1,10.8 3.36,12.25C3.57,12.37 3.78,12.5 4,12.58V21A1,1 0 0,0 5,22H17A1,1 0 0,0 18,21V17.5L22,21.5V10.5L18,14.5M13,4A2,2 0 0,1 15,6A2,2 0 0,1 13,8A2,2 0 0,1 11,6A2,2 0 0,1 13,4M6,6A2,2 0 0,1 8,8A2,2 0 0,1 6,10A2,2 0 0,1 4,8A2,2 0 0,1 6,6Z" /> </svg> </div> <p class="font-weight-400 dark m-v-1"> {{ post.preview_text }} </p> <p> <a href="{% url 'post' post.id %}" class="color-1 italic font-weight-400"><u>Read More</u></a> </div> <hr class="m-v-2"> </div> <p> <br /> {% elif post.post_type == 'gl' %}<br /> </p> <div> {% if post.gallery_slider == True %}</p> <div class="carousel p0"> {% if post.gallery_photo_1.url %}<br /> <input type="radio" name="slides" id="radio-{{ post.id }}-1" class="radio-1" checked=""><br /> {% endif %}<br /> {% if post.gallery_photo_2.url %}<br /> <input type="radio" name="slides" id="radio-{{ post.id }}-2" class="radio-2"><br /> {% endif %}<br /> {% if post.gallery_photo_3.url %}<br /> <input type="radio" name="slides" id="radio-{{ post.id }}-3" class="radio-3"><br /> {% endif %}<br /> {% if post.gallery_photo_4.url %}<br /> <input type="radio" name="slides" id="radio-{{ post.id }}-4" class="radio-4"><br /> {% endif %}</p> <ul class="slides m-v-1"> {% if post.gallery_photo_1.url %}</p> <li class="slide"> <img decoding="async" src="{{ post.gallery_photo_1.url }}" class="img-responsive"> </li> <p> {% endif %}<br /> {% if post.gallery_photo_2.url %}</p> <li class="slide"> <img decoding="async" src="{{ post.gallery_photo_2.url }}" class="img-responsive"> </li> <p> {% endif %}<br /> {% if post.gallery_photo_3.url %}</p> <li class="slide"> <img decoding="async" src="{{ post.gallery_photo_3.url }}" class="img-responsive"> </li> <p> {% endif %}<br /> {% if post.gallery_photo_4.url %}</p> <li class="slide"> <img decoding="async" src="{{ post.gallery_photo_4.url }}" class="img-responsive"> </li> <p> {% endif %} </ul> <div class="slidesNavigation m-v-1"> {% if post.gallery_photo_1.url %}<br /> <label for="radio-{{ post.id }}-1" id="dotForRadio-{{ post.id }}-1"></label><br /> {% endif %}<br /> {% if post.gallery_photo_2.url %}<br /> <label for="radio-{{ post.id }}-2" id="dotForRadio-{{ post.id }}-2"></label><br /> {% endif %}<br /> {% if post.gallery_photo_3.url %}<br /> <label for="radio-{{ post.id }}-3" id="dotForRadio-{{ post.id }}-3"></label><br /> {% endif %}<br /> {% if post.gallery_photo_4.url %}<br /> <label for="radio-{{ post.id }}-4" id="dotForRadio-{{ post.id }}-4"></label><br /> {% endif %} </div> </p></div> <p> {% else %}</p> <div class="row justify-content-center"> <div class="row justify-content-center"> <div class="flex-gallery-container"> {% if post.gallery_photo_1.url %}</p> <div class="flex-gallery-image-container"> <img decoding="async" src="{{ post.gallery_photo_1.url }}"> </div> <p> {% endif %}<br /> {% if post.gallery_photo_2.url %}</p> <div class="flex-gallery-image-container"> <img decoding="async" src="{{ post.gallery_photo_2.url }}"> </div> <p> {% endif %}<br /> {% if post.gallery_photo_3.url %}</p> <div class="flex-gallery-image-container"> <img decoding="async" src="{{ post.gallery_photo_3.url }}"> </div> <p> {% endif %}<br /> {% if post.gallery_photo_4.url %}</p> <div class="flex-gallery-image-container"> <img decoding="async" src="{{ post.gallery_photo_4.url }}"> </div> <p> {% endif %} </p></div> </p></div> </p></div> <p> {% endif %}</p> <div class="m-v-1"> <a href="{% url 'post' post.id %}" class="font-weight-400 black h5 text-uppercase"><br /> {{ post.title }}<br /> </a></p> <div class="m-v-05"> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,19V8H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M7,10H9V12H7V10M15,10H17V12H15V10M11,14H13V16H11V14M15,14H17V16H15V14Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400">{{ post.post_date | date:"d M Y" }}</p> <p class="d-inline dark">/</p> <p> <a href="#"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.author }} </p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" /> </svg><br /> {% for cat in post.categories.all %}{% if forloop.counter0 > 0 %},{% endif %}<br /> <a href="{% url 'category' cat.id %}" class="d-inline dark italic small font-weight-400">{{cat}}</a><br /> {% endfor %}</p> <p class="d-inline dark">/</p> <p> <a href="{% url 'post' post.id %}"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.comments_count }} Comments</p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M8.5,13.5L11,16.5L14.5,12L19,18H5M21,19V5C21,3.89 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19Z" /> </svg> </div> <p class="font-weight-400 dark m-v-1"> {{ post.preview_text }} </p> <p> <a href="{% url 'post' post.id %}" class="color-1 italic font-weight-400"><u>Read More</u></a> </div> <hr class="m-v-3"> </div> <p> <br /> {% elif post.post_type == 'qt' %}<br />  </p> <div clas="m-v-3"> <blockquote> <p class="italic font-weight-400"> {{ post.preview_text }} </p> <footer class="blockquote-footer">{{ post.quote_author }}</footer> </blockquote> <div class="m-v-1"> <div class="m-v-05"> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,19V8H5V19H19M16,1H18V3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1M7,10H9V12H7V10M15,10H17V12H15V10M11,14H13V16H11V14M15,14H17V16H15V14Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400">{{ post.post_date | date:"d M Y" }}</p> <p class="d-inline dark">/</p> <p> <a href="#"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.author }} </p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline"> <path fill="#222225" d="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" /> </svg><br /> {% for cat in post.categories.all %}{% if forloop.counter0 > 0 %},{% endif %}<br /> <a href="{% url 'category' cat.id %}" class="d-inline dark italic small font-weight-400">{{cat}}</a><br /> {% endfor %}</p> <p class="d-inline dark">/</p> <p> <a href="{% url 'post' post.id %}"><br /> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M12,23A1,1 0 0,1 11,22V19H7A2,2 0 0,1 5,17V7A2,2 0 0,1 7,5H21A2,2 0 0,1 23,7V17A2,2 0 0,1 21,19H16.9L13.2,22.71C13,22.89 12.76,23 12.5,23H12M3,15H1V3A2,2 0 0,1 3,1H19V3H3V15Z"> </path> </svg></p> <p class="d-inline dark italic small font-weight-400"> {{ post.comments_count }} Comments</p> <p> </a></p> <p class="d-inline dark">/</p> <p> <svg viewBox="0 0 24 24" class="icon-xs img-responsive d-inline hover-shadow"> <path fill="#222225" d="M10,7L8,11H11V17H5V11L7,7H10M18,7L16,11H19V17H13V11L15,7H18Z" /> </svg> </div> </p></div> <hr class="m-v-3"> </div> <p> <br /> {% else %}</p> <p>ERROR</p> <p> {% endif %}<br /> {% endfor %}<br /> {% else %}</p> <p>No news</p> <p>{% endif %} </p> <div id="lazy_link"> <div> {% if news.has_next %}<br /> <a class="btn outline-color-dark float-right m-v-2 p1" onclick="lazyLoadFunc('?page={{ news.next_page_number }}','lazy_container','lazy_link'); return false" href="?page={{ news.next_page_number }}">Show more</a><br /> {% endif %} </div> </div> <p>

Important to remember - container of news list must be not in this file but “Show More“ link must be in.

In this way we will not recieve container with same id we have and we can update “Show More“ link after each request.

index.html of news app will be like this

<br /> ....</p> <div id="lazy_container"> {% include 'news/parts/_list.html' %} </div> <p>....<br />

4.Show More“ link can be any element. Important only to set onclick function (or other like - onsubmit, onhover, etc.) with 3 parametrs - lazyLoadFunc(url, containerId, linkContainerId):

1 - URL of next page.

2 - Id of news list container

3 - Id of 'show more' link container

JS file.

<br /> //check if no function parseJson we make it<br /> if (typeof parseJson !== 'function') {<br /> function parseJson(code)<br /> {<br /> try {<br /> return JSON.parse(code);<br /> } catch (e) {<br /> return code;<br /> }<br /> }<br /> }</p> <p>//Lazy Load function<br /> //Options: 1 - url where need to send request like '?page=2'<br /> // 2 - Id of container where data must be placed<br /> // 3 - Id of contaniner where 'show more' link is.</p> <p>function lazyLoadFunc(url, containerId, linkContainerId){<br /> var r = new XMLHttpRequest();<br /> r.addEventListener('readystatechange', function(event){</p> <p> if (this.readyState === 4){<br /> if (this.status === 200){</p> <p> //get answer and parse it<br /> var data = parseJson(r.responseText);</p> <p> //if not empty answer<br /> if(!!data){<br /> //remove old link<br /> var linkContainer = document.getElementById(linkContainerId);<br /> linkContainer.remove();</p> <p> //insert new data to container<br /> var container = document.getElementById(containerId);<br /> container.insertAdjacentHTML('beforeend', data.html);</p> <p> }</p> <p> }<br /> }<br /> })<br /> r.open('get', url+'&lazy_load=True' , true);<br /> r.send();<br /> }<br />

Do not forget to include it in base.html file.