• Hi
    Hi there
    I have a question about the new function I put in the site, it’s ajax load more post for the custom post type, but I think it’s slow down my page load, the scroll thing take a while to finish, and click load more button need to wait for whole page load to actually function, is any way to avoid that, or make page load faster?

    1. I thought maybe this code limited in only work for this template, how can I wrap this function using if( template_name){
    }

    function.php

    //load more
    add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
    add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');
    
    function load_posts_by_ajax_callback() {
        check_ajax_referer('load_more_posts', 'security');
        $paged = $_POST['page'];
        $args = array(
                  'post_type'      => 'books',
                  'post_status'    => 'publish',
                  'posts_per_page' => 5,
                  'order'          => 'DESC',
                  'paged'          => $paged,				 
                );
        
        $my_posts = new WP_Query( $args );  
        if ( $my_posts->have_posts() ) :
            ?>
            <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
     
                <?php get_template_part( 'template-parts/content', 'page' ); ?>
               
            <?php endwhile ?>
            <?php
        endif;
     
        wp_die();
    }

    My script code

         
    	// {ID} is any unique name, example: b1, q9, qq, misha etc, it should be unique
    	let ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
    	let page = 2;
            jQuery(function($) {
    	   $('body').on('click', '.loadmore', function() {
    		 var data = {
    		'action': 'load_posts_by_ajax',
    		'page': page,
    		'security': '<?php echo wp_create_nonce("load_more_posts"); ?>',
    		'max_page': '<?php echo $my_query->max_num_pages; ?>'
    					        };
    					   
    
    		$.post(ajaxurl, data, function(response) {
    		console.log()
    		$('.content').append(response);
    		    page++;    
                    })
    					        
    		if(page == data['max_page']){
    			$('.loadmore').fadeOut();
                    }
               });
            });
    </script>
    

    Thank you guys so much

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    I’m not sure, but I think the .append() method has to wait until the page loads before it can add to it. Even if I’m wrong, the best strategy is to get your page to load faster. Slow pages are a problem even without Ajax.

    Improving page speed requires a multi-pronged approach to address every reasonable improvement. Large images are frequently a cause of slow pages. They are larger than necessary either pixel wise and/or data wise. Be very aggressive in compressing images and avoid .png files. Make then only as large pixel wise as necessary to fit their container.

    Plugins that optimize text files and cache pages served can make marked improvements. These plugins require fine tuning to get the best performance. They are not plug and play. For more suggestions, try Google’s Page Speed tool. Be aware that some of this tool’s suggestions may be impractical to implement. For example, deferring below the fold CSS is very difficult to accomplish on most WP sites.

    Thread Starter madebymt

    (@madebymt)

    @bcworkz
    Thank you so much for your help! I optimize the image, gzip and cache. I will try to see if I can do something else to make it better.

    Thank you!!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Ajax load in function slow down page’ is closed to new replies.