Lazy Loading Implementation Generator | Kloudbean Developer Tools
HTML Only
Complete Implementation
🔧 Generate Lazy Loading Code
🗑️ Clear All
Kloudbean Zero-Ops Managed Cloud Infrastructure and Hosting Powerful & Cost-Effective Managed Cloud Hosting for Everyone
Start Free Trial
How to Use the Lazy Loading Implementation Tool
Configure your lazy loading preferences, enter your image URLs or content selectors, and generate optimized lazy loading code. Toggle between HTML-only output or complete implementation with CSS and JavaScript.
Why Lazy Loading Matters for Web Performance
Lazy loading significantly improves page load times by deferring the loading of non-critical resources until they're needed. This reduces initial page weight, saves bandwidth, and improves user experience, especially on mobile devices.
Implementation Types and Use Cases
This tool supports multiple lazy loading scenarios:
Image lazy loading for photo galleries, product catalogs, and content-heavy pages
Content lazy loading for infinite scroll implementations and dynamic content loading
iFrame lazy loading for embedded videos, maps, and third-party content
Background image lazy loading for hero sections and decorative elements
Modern Browser Support and Fallbacks
The generated code uses the modern IntersectionObserver API for optimal performance. Optional fallback support ensures compatibility with older browsers while maintaining functionality across all platforms.
Frequently Asked Questions
Q. What is the IntersectionObserver API?
Q. How does lazy loading improve SEO?
Q. Can I customize the intersection threshold?
Q. Does this work with responsive images?
Ready to optimize your website's performance with professional hosting? Host with Kloudbean Today!
`;
} else {
// HTML only
result = htmlCode;
}
outputText.value = result;
updateOutputLineNumbers();
// Add success animation
generateButton.classList.add('success-animation');
showStatus(`✅ Successfully generated lazy loading code for ${validation.lines.length} item(s)!`, 'valid');
} catch (error) {
console.error('Generation error:', error);
showStatus('❌ Error generating code: ' + error.message, 'invalid');
outputText.value = '';
updateOutputLineNumbers();
} finally {
// Remove loading state
setTimeout(() => {
generateButton.classList.remove('loading', 'success-animation');
generateButton.textContent = '🔧 Generate Lazy Loading Code';
}, 1000);
}
}
// Update line numbers when content changes
function updateLineNumbers() {
const codeInput = document.getElementById('input-text');
const lineNumbers = document.getElementById('line-numbers');
const lines = codeInput.value.split('\n');
const count = Math.max(lines.length, 1);
let lineNumbersContent = '';
for (let i = 1; i <= count; i++) {
lineNumbersContent += i + '\n';
}
lineNumbers.innerText = lineNumbersContent;
codeInput.style.height = 'auto';
codeInput.style.height = (codeInput.scrollHeight) + 'px';
}
// Update output line numbers
function updateOutputLineNumbers() {
const outputArea = document.getElementById('output-text');
const lineNumbers = document.getElementById('output-line-numbers');
const lines = outputArea.value.split('\n');
const count = Math.max(lines.length, 1);
let lineNumbersContent = '';
for (let i = 1; i <= count; i++) {
lineNumbersContent += i + '\n';
}
lineNumbers.innerText = lineNumbersContent;
outputArea.style.height = 'auto';
outputArea.style.height = (outputArea.scrollHeight) + 'px';
}
// Show status message
function showStatus(message, status) {
const statusDiv = document.getElementById('status-message');
statusDiv.textContent = message;
statusDiv.className = `tool-status tool-${status}`;
statusDiv.style.display = 'block';
// Auto-hide status after 7 seconds
setTimeout(() => {
statusDiv.style.display = 'none';
}, 7000);
}
// Clear all content
function clearAll() {
document.getElementById('input-text').value = '';
document.getElementById('output-text').value = '';
document.getElementById('status-message').style.display = 'none';
updateLineNumbers();
updateOutputLineNumbers();
}
// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
// Initialize UI mode
updateUIMode();
updateLineNumbers();
updateOutputLineNumbers();
// Event listeners
modeToggle.addEventListener('change', updateUIMode);
lazyType.addEventListener('change', updateUIMode);
generateButton.addEventListener('click', processGeneration);
// Input text events
inputText.addEventListener('input', updateLineNumbers);
inputText.addEventListener('keyup', updateLineNumbers);
inputText.addEventListener('scroll', function() {
document.getElementById('line-numbers').scrollTop = this.scrollTop;
});
// Output text events
outputText.addEventListener('scroll', function() {
document.getElementById('output-line-numbers').scrollTop = this.scrollTop;
});
// Clear input button
document.getElementById('clear-input').addEventListener('click', function() {
inputText.value = '';
document.getElementById('status-message').style.display = 'none';
updateLineNumbers();
});
// Copy output button with improved feedback
document.getElementById('copy-output').addEventListener('click', function() {
if (outputText.value.trim() === '') {
showStatus('⚠️ No code to copy! Please generate code first.', 'invalid');
return;
}
try {
outputText.select();
document.execCommand('copy');
const original = this.textContent;
this.textContent = '✅ Copied!';
this.style.background = 'linear-gradient(45deg, #28c840, #34d058)';
setTimeout(() => {
this.textContent = original;
this.style.background = 'linear-gradient(45deg, #4F1AF3, #6D3EF7)';
}, 2000);
showStatus('📋 Code copied to clipboard successfully!', 'valid');
} catch (err) {
console.error('Failed to copy:', err);
showStatus('❌ Failed to copy code to clipboard.', 'invalid');
}
});
// Add sample content on double-click with improved UX
inputText.addEventListener('dblclick', function() {
if (this.value.trim() === '') {
const type = lazyType.value;
let sampleContent = '';
switch(type) {
case 'image':
sampleContent = `https://picsum.photos/800/600?random=1
https://picsum.photos/800/600?random=2
https://picsum.photos/800/600?random=3
https://picsum.photos/800/600?random=4`;
break;
case 'content':
sampleContent = `.lazy-section
#content-area
.card-content
.dynamic-content`;
break;
case 'iframe':
sampleContent = `https://www.youtube.com/embed/dQw4w9WgXcQ
https://player.vimeo.com/video/76979871`;
break;
case 'background':
sampleContent = `https://picsum.photos/1920/1080?random=1
https://picsum.photos/1920/1080?random=2
https://picsum.photos/1920/1080?random=3`;
break;
}
this.value = sampleContent;
updateLineNumbers();
showStatus('📝 Sample content added! Click Generate to see the code.', 'valid');
}
});
// Add keyboard shortcuts
document.addEventListener('keydown', function(e) {
// Ctrl/Cmd + Enter to generate
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
processGeneration();
}
// Escape to clear status
if (e.key === 'Escape') {
document.getElementById('status-message').style.display = 'none';
}
});
// Add tooltips for better UX
const tooltipElements = [
{ element: threshold, text: 'Controls when lazy loading triggers (0.0 = as soon as visible, 1.0 = fully visible)' },
{ element: rootMargin, text: 'Margin around root. Use negative values to trigger earlier, positive for later' },
{ element: placeholderColor, text: 'Color shown while content is loading' }
];
tooltipElements.forEach(({ element, text }) => {
element.title = text;
});
// Add input validation feedback
threshold.addEventListener('input', function() {
const value = parseFloat(this.value);
if (isNaN(value) || value < 0 || value > 1) {
this.style.borderColor = '#ff5f57';
showStatus('⚠️ Threshold must be between 0.0 and 1.0', 'invalid');
} else {
this.style.borderColor = 'rgba(79, 26, 243, 0.2)';
}
});
// Add auto-save functionality (localStorage)
function saveState() {
try {
const state = {
lazyType: lazyType.value,
threshold: threshold.value,
rootMargin: rootMargin.value,
placeholderColor: placeholderColor.value,
fadeEffect: fadeEffect.checked,
errorHandling: errorHandling.checked,
fallbackSupport: fallbackSupport.checked,
modeToggle: modeToggle.checked,
inputText: inputText.value
};
localStorage.setItem('lazyLoadingTool', JSON.stringify(state));
} catch (e) {
console.log('Could not save state:', e);
}
}
function loadState() {
try {
const saved = localStorage.getItem('lazyLoadingTool');
if (saved) {
const state = JSON.parse(saved);
lazyType.value = state.lazyType || 'image';
threshold.value = state.threshold || '0.1';
rootMargin.value = state.rootMargin || '0px 0px 50px 0px';
placeholderColor.value = state.placeholderColor || '#f0f0f0';
fadeEffect.checked = state.fadeEffect !== undefined ? state.fadeEffect : true;
errorHandling.checked = state.errorHandling !== undefined ? state.errorHandling : true;
fallbackSupport.checked = state.fallbackSupport || false;
modeToggle.checked = state.modeToggle !== undefined ? state.modeToggle : true;
if (state.inputText) {
inputText.value = state.inputText;
}
updateUIMode();
updateLineNumbers();
}
} catch (e) {
console.log('Could not load state:', e);
}
}
// Load saved state
loadState();
// Save state on changes
[lazyType, threshold, rootMargin, placeholderColor, fadeEffect, errorHandling, fallbackSupport, modeToggle, inputText].forEach(element => {
element.addEventListener('change', saveState);
element.addEventListener('input', saveState);
});
// Add welcome message
setTimeout(() => {
if (inputText.value.trim() === '' && outputText.value.trim() === '') {
showStatus('👋 Welcome! Double-click the input area to add sample content, or enter your own URLs/selectors.', 'valid');
}
}, 1000);
});
