Loading at the bottom of the page using Django + ajax

Loading at the bottom of the page using Django + ajax
Loading at the bottom of the page using Django + ajax

Requirement: display the image. When the scroll bar is dragged to the bottom of the page, some pictures are loaded. Q: The display of photo uses django's QuerySet. It is a headache for ajax loading. I also made up js. Solution: Use the clever method to paging photo first, and then load the photo part of the next page to the current page using the ajax load method.

Paging

The first step is to display the QuerySet page of photo. I will use the url of 127.0.0.1: 8000/x/here, so write it in urls. py.

Url (R' ^ (? P
  
   
D +)/$ ', index, name = 'page '),
  

The number of loads on each page has been changed several times, and the final decision is smaller than 5. Therefore, we need to split the QuerySet Based on the page to obtain the corresponding image. However, QuerySet cannot be sorted, first convert the list into a list and then slice it.
Views. py

def index(request,page=0):    if request.method=='POST':        ...    else:        photos=list(Photo.objects.filter(is_show=True).order_by('-id'))[int(page)*5:(int(page)+1)*5]        return render_to_response('index.html',RequestContext(request,{'photos':photos}))

In this way, only five images are displayed on each page.

Bottom loading

Generally, the code structure for sliding the page to the bottom is similar to this:

$ (Window ). scroll (function () {var scrollTop = $ (this ). scrollTop (); // The distance from the scroll bar to var scrollHeight = $ (document ). height (); // The height of the entire html page var returns wheight = $ (this ). height (); // The height of the visible page if (scrollTop + windowHeight = scrollHeight) {// do something }});

Here I stopped and thought about it again. To get the image of the next page, first I need to know the url of the next page, and the loading itself occurs on the home page, that is, if there is no/x/, it is necessary to handle the problem.

Var url = window. location. href; // obtain the current page Link var cuts = url. split ('/'); // separate to obtain the page number if (cuts. length <5) {var cur_page_num = 1;} else {var cur_page_num = parseInt (cuts [3]);}

In addition, you need to add the page number cyclically during the drag process.
Next, use the ajax load method to obtain the corresponding div, but the load method must be loaded into a container. Therefore, you must first create a container to load the newly loaded, if it is directly loaded into the original div, it will overwrite the previous photo.
All photo files are packed in a large container.

{% block content %} {% endblock %}

Each small photo div in the block

...

To avoid overwriting the previous content each time, you must create a container and separate it with a unique identifier from other containers.
Therefore, write in js as follows:

If (scrollTop + fig = scrollHeight) {var nexturl = cuts [0] + '//' + cuts [1] + cuts [2] + '/' + String (cur_page_num + 1) + '/'; // url cur_page_num + = 1 For splicing the next page; // auto-increment 1 // alert (cur_page_num); var newnode = document. createElement (div); newnode. setAttribute (class, container-fluid grid); newnode. setAttribute (id, new + String (cur_page_num); document. body. appendChild (newnode); $ ('# new' + String (cur_page_num )). load (nexturl + '. grid-item ');}

Each time the slide is dragged to the bottom, the page number is automatically added with 1, which avoids loading only the next page. The newly created div also hasClass = 'iner iner-fluid grid', And keep the style consistent with the previous one. Add anotherId = new + page number, Load the container to the new container by using the load method.
So far, the entire loading process is basically implemented.