Home Forums Travel WordPress Theme Everything is loading on a single page

This topic contains 13 replies, has 2 voices, and was last updated by  BWSM 4 years, 3 months ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #376

    Japan
    Participant

    On the main page of the site I run everything is loading on the index page. meaning all of my posts are loading with an endless scroll. There is no ajax stopping it after so many posts are displayed.

    Is there a way to stop loading posts after the most recent 10 or something like that. Then if the user scrolls to the final post in the list it will ajax auto load the next 10 to extend the page vertically and display more. Basically I just want a buffer so when the page loads its not loading over 200 thumbnails and youtube clips into a single load.

    Does that make sense?

    #378

    BWSM
    Keymaster

    Did you mean:
    Add a button like “next page”, when use click th button, the next 10 post is shown?

    • This reply was modified 4 years, 4 months ago by  BWSM.
    #412

    Japan
    Participant

    Yes that or a simple ajax loader like you see used when searching google images or browsing facebook posts. It limits the amount loaded onto the page until the user hits the bottom of the page and then it loads more posts.

    Is this possible? Both options are ok with me. I just dont want hundreds of posts on a single page all loading at the same time which bogs down the site initial load.

    #420

    BWSM
    Keymaster

    It’s possible, we’ll consider add the option to next version.

    I’ll write a guide to you if you want DIY.

    #421

    Japan
    Participant

    I would love to attempt to do this myself if you can walk me through the steps 🙂
    rabid-turtle@shaw.ca

    Thank you sooooo much!!!

    #433

    BWSM
    Keymaster

    There are 4 files to change and add 1 js file:
    index.php, footer.php, style.css and js/main.js

    1) Change line 75/76 of index.php as:

    <div id="page-nav" style="display:block;"><?php next_posts_link(__('Load more','ux')); ?></div>
    </div>

    2) Unzip the file attached and add manual-trigger.js to js folder

    Add the code above < ?php wp_footer(); ?> in footer.php
    <script src="<?php echo get_template_directory_uri();?>/js/manual-trigger.js?ver=1" type="text/javascript"></script>

    • This reply was modified 4 years, 3 months ago by  BWSM.
    #438

    BWSM
    Keymaster

    3)change line 672-682 in js/main.js as:

    			// Call infinit-scroll
    			jQuery('#list_wrap').infinitescroll({
    		    	navSelector  : '#page-nav  a:last',    // selector for the paged navigation 
    		    	nextSelector : '#page-nav  a:last',  // selector for the NEXT link (to page 2)
    		    	itemSelector : '.list_unit',     // selector for all items you'll retrieve
    				behavior		: 'twitter',
    				errorCallback: function() { 
    				// fade out the error message after 2 seconds
    				jQuery('#page-nav a').fadeOut('normal');
    				jQuery('#infscr-loading').fadeOut('normal'); 
    				},
    		    	loading: {
    					finished : undefined,
    					finishedMsg : ''
    		    	}
    			},
    			function( newElements ) {
    					jQuery('#page-nav a').fadeIn('normal');
    #440

    BWSM
    Keymaster

    4) change line 140 of style.css as:

    #line_type_wrap{ width:20%;position: absolute;right:0; padding-bottom:100px; }

    #442

    BWSM
    Keymaster

    Because the version difference, maybe the lines does not match. Please also refer to the screenshot

    #469

    Japan
    Participant

    First off thank you for writing such a detailed instruction list including pictures. That really helped.

    After modification and addition of files the site still however loads everything onto a single page on initial load without any movement from the user. I have deleted all cache, deleted original files on server, verified modified versions of files on server.

    I should also note Ive triple checked and redone the process 3 times over using unmodified backup versions of my files in case something blew up.

    Not sure what is going on. Strange right? Any idea what could be going on?

    #471

    Japan
    Participant

    main.js
    style.css
    index.php

    #475

    BWSM
    Keymaster

    Did you make the step2) ? I did not see the screenshot. Best paste your url or wp-admin by Set as private replyivate reply

    • This reply was modified 4 years, 3 months ago by  BWSM.
    #480

    Japan
    Participant
    This reply has been marked as private.
    #487

    BWSM
    Keymaster

    Hi,

    Is your front page set latest posts not a list page? I suggest your set a list page as front page

    1) Page/ add new, select list tempate, select a category in page option

    2) Setting/reading/active “A static page”, select the list page

    If you do not want to use list page, you need to change archive.php same as index.php also. And change posts_per_page=9999 as posts_per_page=10

    If it does not work, please paste your wp-admin by Set as private replyivate reply.I`ll log in to check

    • This reply was modified 4 years, 3 months ago by  BWSM.
    • This reply was modified 4 years, 3 months ago by  BWSM.
    • This reply was modified 4 years, 3 months ago by  BWSM.
    • This reply was modified 4 years, 3 months ago by  BWSM.
Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.