wake-up-neo.net

Lazy Load mit WP_Query-Paginierung

Ich habe darüber nachgedacht, die Paginierung von WP_Query zu verwenden, um ein benutzerdefiniertes Lazy Loading zu erstellen. Gibt es eine Möglichkeit, die Paginierung von WP_Query für eine langsame Ladung zu verwenden?

Nehmen wir zum Beispiel an, ich muss beim ersten Laden 24 Posts laden, und wenn der Bildlauf den unteren Rand erreicht, lädt er die nächsten 24 Posts nur schleppend.

Ist das möglich?

1
karlo jay bueno

Schauen Sie sich dieses grobe Beispiel an. Dies erfordert ein wenig Anpassung, aber insgesamt macht es, was Sie wollen - es lädt X Menge der nächsten Beiträge, wenn der Benutzer auf eine Schaltfläche klickt, die unter den bereits geladenen Beiträgen liegen sollte.

Wenn Sie automatisch weitere Beiträge laden möchten, wenn der Benutzer einen Bildlauf nach unten durchführt, ersetzen Sie einfach das Klickereignis durch einen anderen Code, der den Bildlauf im Auge behält. Es gibt viele Beispiele online.

  • Behalten Sie jQuery('some-html-element')-s im Auge, benennen Sie diese Elementnamen um oder ändern Sie Ihre eigene HTML, damit sie passen
  • Gesamtzahl der Beiträge: Sie können es sichtbar machen, wenn Benutzer die Gesamtzahl der Beiträge sehen sollen, oder CSSopacity verwenden, um es auszublenden. Es muss noch irgendwo sein, um einen Platz zum Speichern des Werts zu haben

Dies geht an Ihre wichtigsten .js:

Diese Funktion behandelt alle DOM-Manipulationen und Ajax. Es kann angerufen werden, wie Sie möchten.

//ajaxLock is just a flag to prevent double clicks and spamming
var ajaxLock = false;

if( ! ajaxLock ) {

    function ajax_next_posts() {

        ajaxLock = true;

        //How many posts there's total
        var totalPosts = parseInt( jQuery( '#total-posts-count' ).text() );
        //How many have been loaded
        var postOffset = jQuery( '.single-post' ).length;
        //How many do you want to load in single patch
        var postsPerPage = 24;

        //Hide button if all posts are loaded
        if( totalPosts < postOffset + ( 1 * postsPerPage ) ) {

            jQuery( '#more-posts-button' ).fadeOut();
        }

        //Change that to your right site url unless you've already set global ajaxURL
        var ajaxURL = 'http://www.my-site.com/wp-admin/admin-ajax.php';

        //Parameters you want to pass to query
        var ajaxData = '&post_offset=' + postOffset + '&action=ajax_next_posts';

        //Ajax call itself
        jQuery.ajax({

            type: 'get',
            url:  ajaxURL,
            data: ajaxData,
            dataType: 'json',

            //Ajax call is successful
            success: function ( response ) {

                //Add new posts
                jQuery( '#posts-container' ).append( response[0] );
                //Update the count of total posts
                jQuery( '#total-posts-count' ).text( response[1] );

                ajaxLock = false;
            },

            //Ajax call is not successful, still remove lock in order to try again
            error: function () {

                ajaxLock = false;
            }
        });
    }
}

Dies geht an Ihre wichtigsten .js:

Dies ist ein Beispiel, wie man die Funktion oben mit der Taste aufruft. Dies ist meiner Meinung nach besser. Der Benutzer kann wählen, ob er mehr sehen möchte.

//Load more posts button
jQuery( '#more-posts-button' ).click( function( e ) {

    e.preventDefault(); 

    ajax_next_posts(); 

});

Das geht zu functions.php oder erstelle ein mu-plugin:

Dies ist die Funktion, die auf Ihrem Server "ausgeführt" wird. Ajax ruft dies auf, tut es und sendet die Ergebnisse zurück.

//More posts - first for logged in users, other for not logged in
add_action('wp_ajax_ajax_next_posts', 'ajax_next_posts');
add_action('wp_ajax_nopriv_ajax_next_posts', 'ajax_next_posts');

function ajax_next_posts() {

    //Build query
    $args = array(
        //All your query arguments
    );

    //Get offset
    if( ! empty( $_GET['post_offset'] ) ) {

        $offset = $_GET['post_offset'];
        $args['offset'] = $offset;

        //Also have to set posts_per_page, otherwise offset is ignored
        $args['posts_per_page'] = 24;
    }

    $count_results = '0';

    $query_results = new WP_Query( $args );

    //Results found
    if ( $query_results->have_posts() ) {

        $count_results = $query_results->found_posts;

        //Start "saving" results' HTML
        $results_html = '';
        ob_start();

        while ( $query_results->have_posts() ) { 

            $query_results->the_post();

            //Your single post HTML here
        }    

        //"Save" results' HTML as variable
        $results_html = ob_get_clean();  
    }

    //Build ajax response
    $response = array();

    //1. value is HTML of new posts and 2. is total count of posts
    array_Push ( $response, $results_html, $count_results );
    echo json_encode( $response );

    //Always use die() in the end of ajax functions
    die();  
}
2
N00b

Ich habe dafür die unendliche Schriftrolle verwendet.

Folgendes habe ich in script.js verwendet

$(function(){
    var $container = $('#ms-container');
    $container.imagesLoaded(function(){
      $container.masonry({
        itemSelector : '.ms-item',


      });
    });
//var templateUrl = object_name.templateUrl;
//var src =  "'"+templateUrl+"/images/loader.gif' ";

$container.infinitescroll({
      navSelector  : '#navigation',    // selector for the paged navigation 
      nextSelector : '#navigation a',  // selector for the NEXT link (to page 2)
      itemSelector : '.ms-item', 


      loading: {
          finishedMsg: $('<div class="finmsg">No More Posts.</div>'),
          msgText: '',
          img: '',
          speed: 0
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true ); 
        });
      }
    );
});

Ich verwende Mauerwerk, daher müssen Sie dies möglicherweise anpassen. Der Gesamtcontainer auf der Archivseite ist

<div id="ms-container">

Daher:

var $container = $('#ms-container');

Mein Container für jeden einzelnen Beitrag, der auf meiner Archivseite angezeigt wird, ist:

<div class="ms-item col-sm-4">

Daher:

itemSelector : '.ms-item',

Dies ist, was ich als Paginierung am unteren Rand der Archivseite verwende:

      <div id ="navigation" class="pagination pull-left prevnext">
      <ul class="list-inline clearfix">
        <li class="text-left pull-left"><?php previous_posts_link( '<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span> Previous' );?></li>
        <li class="text-right pull-right"><?php next_posts_link( 'Next <span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>'); ?></li>
      </ul>
      </div>

Wenn ich mich richtig erinnere, habe ich hier die Informationen dazu: https://stackoverflow.com/questions/9766515/imagesloaded-method-not-working-with-jquery-masonry-and-infinite-scroll

0
MrFox