"Lazy Load" post list?

Developer help
1

Strange request, but I’ve searched and looked at Infinite Scroll, but I have a feeling it won’t work for my use case.

I built my template/site from the ground up and does everything I need it to, but the pages that have the posts list (over 500 so far) load very slowly.

So I’d like to be able to…

  • Show the first 10
  • Have the rest hidden until hovering a link to show a DIV
  • Show the rest of the posts but with an Infinite Scroll within the DIV

Is this possible at all?

Here’s a quick (2m) video explaner: https://cln.sh/06cdpnrP
Here’s the site: https://kiakamgar.com
Here’s the code for the home page…

<section>
	<article>		
		{{#get "posts" filter="tags:[hash-blog]+visibility:public" limit="1"}}
			{{#foreach posts}}
				<div class="wide">
					<h1>{{title}}</h1>
				</div>
				{{#if access}}
					{{#has tag="#largeimage"}}
						<div class="narrow">
							{{excerpt}}
						</div>
						<div class="wide">
							<img src="{{feature_image}}" alt="{{title}}" />
						</div>
						<div class="wide">
							{{content}}
						</div>
					{{else}}
						<div class="wide">
							{{content}}
						</div>
					{{/has~}}
				{{else}}
					<div class="wide">
						{{content}}
					</div>
				{{/if}}
			{{/foreach}}
		{{/get}}
	</article>
</section>

<div class="spacer_25"></div>

<section>
		<div class="narrow">
				<h2>Hi, I'm Kia</h2>
				<div class="spacer_25"></div>
				If you have any thoughts, requests or feedback
				<a href="/email" title="Email" target="_top">shoot me an email</a>.
				You can also
				<a href="/about" title="About" target="_top">learn more about me</a>,
				or follow via
				<a href="/rss" title="RSS" target="_top">RSS</a>
				or
				<a href="/subscribe" title="Subscribe" target="_top" data-portal="signup">email</a>.
				<div class="spacer_25"></div>
		</div>
</section>

<section>
		<div class="wide">
			<h2>Latest</h2>
			<div class="spacer_25"></div>
			{{#foreach posts from="1" to="10"}}
				<a href="{{url}}" title="{{title}} – {{date format="MMMM DD, YYYY"}}" target="_top">
						<div class="latest_posts">
								{{#if access}}{{else}}
										{{> "icons/star"}}
								{{/if}}
								{{title}}
						</div>
				</a>
				<div class="spacer_5"></div>
			{{/foreach}}
			
			<div class="dropdown-container">
				<div class="dropdown-link">
					&darr; <a href="#more" title="More...">See more</a>
				</div>
				<div class="dropdown-content">
						<div class="spacer_5"></div>
						<a href="/search" title="Search" target="_top"data-ghost-search><div>Search →</div></a>
						<div class="spacer_5"></div>
						{{#get "posts" filter="tags:[hash-blog]" limit="all"}}
							{{#foreach posts from="11"}}
								<a href="{{url}}" title="{{title}} – {{date format="MMMM DD, YYYY"}}" target="_top">
										<div class="latest_posts">
												{{#if access}}{{else}}
														{{> "icons/star"}}
												{{/if}}
												{{title}}
										</div>
								</a>
								<div class="spacer_5"></div>
						{{/foreach}}
						{{/get}}
				</div>
			</div>
			
			
		</div>
</section>

<div class="spacer_25"></div>
2

I didn’t notice it being laggy, but it’s likely because of the get all.

If you only keep the first part, where you get the initial 10 posts, do you still experience slowness?

I think you’d need to fix this would be to use the Content API to fetch the data as you need it. This would require some infinite scroll or another mechanism to implement it.