Lazy Loading

This example shows how to lazily load an element on a page. This lazy loading can be used for loading large images.

• Full Code at GitHub
• Source at htmx.org

The lazy loading functionality is super simple to implement in Ludic. You can create just two function-based endpoints and use the LazyLoader component from the catalog:

 1   from ludic.catalog.headers import H3
 2   from ludic.catalog.layouts import Box, Frame
 3   from ludic.catalog.loaders import LazyLoader
 4   from ludic.web import LudicApp, Request
 5   
 6   app = LudicApp()
 7   
 8   @app.get("/")
 9   async def index(request: Request) -> LazyLoader:
10       return LazyLoader(load_url=request.url_for(load_content))
11   
12   @app.get("/load/")
13   async def load_content() -> Box:
14       return Box(
15           Frame(
16               H3("Content Loaded"),
17           )
18       )