Flip Lazy Loading - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flip Lazy Loading</title> <style> body { font-family: 'Arial', sans-serif; background: linear-gradient(135deg, #24C6DC, #514A9D); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; margin: 0; } h1 { margin-bottom: 20px; font-size: 2.5em; } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; width: 90%; max-width: 1000px; } .gallery img { width: 100%; border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: opacity 0.5s ease, transform 0.5s ease; opacity: 0; transform: rotateY(90deg); } .gallery img.lazyloaded { opacity: 1; transform: rotateY(0deg); } .gallery img.loading-icon { content: url('https://example.com/loading-icon.png'); display: block; margin: 0 auto; } .loader { display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.8); position: fixed; top: 0; left: 0; z-index: 10; } .loader img { width: 80px; animation: flip 1.5s linear infinite; } @keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } </style> </head> <body> <h1>Flip Lazy Loading 🔄</h1> <div class="gallery"> <img data-src="https://via.placeholder.com/500x300" alt="Image 1" class="loading-icon"> <img data-src="https://via.placeholder.com/500x300" alt="Image 2" class="loading-icon"> <img data-src="https://via.placeholder.com/500x300" alt="Image 3" class="loading-icon"> <img data-src="https://via.placeholder.com/500x300" alt="Image 4" class="loading-icon"> <img data-src="https://via.placeholder.com/500x300" alt="Image 5" class="loading-icon"> <img data-src="https://via.placeholder.com/500x300" alt="Image 6" class="loading-icon"> </div> <div class="loader"> <img src="https://example.com/spinner-icon.png" alt="Loading..."> </div> <script> document.addEventListener('DOMContentLoaded', function () { const loader = document.querySelector('.loader'); loader.style.display = 'none'; const lazyLoadImages = () => { const images = document.querySelectorAll('.gallery img'); images.forEach(image => { const imageSrc = image.getAttribute('data-src'); if (imageSrc) { image.src = imageSrc; image.onload = () => { image.classList.remove('loading-icon'); image.classList.add('lazyloaded'); } } }); }; let lazyLoadThrottleTimeout; const lazyLoad = () => { if (lazyLoadThrottleTimeout) { clearTimeout(lazyLoadThrottleTimeout); } lazyLoadThrottleTimeout = setTimeout(() => { const scrollTop = window.pageYOffset; const images = document.querySelectorAll('.gallery img'); images.forEach(image => { if (image.offsetTop < (window.innerHeight + scrollTop)) { image.src = image.dataset.src; image.onload = () => { image.classList.remove('loading-icon'); image.classList.add('lazyloaded'); } } }); if (images.length === 0) { document.removeEventListener('scroll', lazyLoad); window.removeEventListener('resize', lazyLoad); window.removeEventListener('orientationChange', lazyLoad); } }, 20); }; document.addEventListener('scroll', lazyLoad); window.addEventListener('resize', lazyLoad); window.addEventListener('orientationChange', lazyLoad); lazyLoad(); }); </script> </body> </html>