Lazy Load CodeGenerator
Generate lazy loading code for images, scripts, and other assets
Configuration
Generated JavaScript
const lazyLoad = () => {
const elements = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const element = entry.target;
element.classList.add('loading');
// Load logic here...
observer.unobserve(element);
}
});
}, {
rootMargin: '0px',
threshold: 0.1
});
elements.forEach(el => observer.observe(el));
};HTML Usage
<!-- HTML Usage Examples -->
<!-- Lazy load images -->
<img data-src="image.jpg" alt="Description" class="lazy-image">
<!-- Lazy load scripts -->
<script data-src="heavy-library.js" class="lazy-script"></script>
<!-- Lazy load stylesheets -->
<link data-src="styles.css" rel="stylesheet" class="lazy-style">