In View Content Renderer
Lazy-loads and renders content as it enters the viewport, optimizing resource usage and improving page performance.
This Mendix pluggable widget lazy-loads and renders content as it enters the viewport, optimizing resource usage and improving the performance of Mendix apps.
- Efficient Lazy-Loading: Dynamically loads content in Mendix pages as the user scrolls, reducing initial load times.
- Performance Optimization: Enhances user experience by minimizing resource usage on page load.
- Mendix Studio Pro Integration: Easily integrated into Mendix applications via drag-and-drop in Mendix Studio Pro.
- Customizability: Flexible design allowing for custom content rendering as needed.
- Viewport Detection: Utilizes modern browser IntersectionObserver API for detecting when content enters the viewport.
To use the InViewContentRenderer widget in your Mendix app:
- Download the widget from the Mendix Marketplace and add it to your app project.
- In Mendix Studio Pro, navigate to the page where you want the content to be lazily loaded.
- Drag and drop the InViewContentRenderer widget onto your page.
- Configure the widget properties, if necessary, to specify the content that should be rendered lazily.
- Run your app locally or publish it to see the lazy-loading in action.
Issues, suggestions, and feature requests:
We welcome your feedback and contributions. Please report any issues or suggest features on our GitHub repository: Report an issue or suggest a feature
Development and contribution:
- Clone the repository to your local machine.
- Install the necessary packages using npm install.
- Use npm start to begin compilation in watch mode.
- Make changes to the source code. The widget will automatically recompile.
- Test the widget within your Mendix app by importing the MPK file from the dist folder.
- Code Contributions: Submit pull requests with detailed descriptions of changes.
- Issue Reporting: Use the GitHub issues template to report problems or suggest features.
- Documentation: Help improve or correct the documentation.