/** * 🖼️ Bangalirhaat — Eager Image Loading Optimization * ──────────────────────────────────────────────────────── * Ensures all images load immediately with optimal rendering */ /* ──────────────────────────────────────────────────────── Force Eager Loading ──────────────────────────────────────────────────────── */ img{loading:eager !important;display:block;max-width:100%;height:auto;background-color:var(--bg-secondary,#f5f5f5);opacity:1;transition:opacity 0.2s ease-out}img:not([src]),img[src=""],img[loading="lazy"]{background-color:var(--bg-secondary,#f5f5f5);min-height:120px;opacity:0.8}img[loading="eager"][src]:not([src=""]){opacity:1}/* ──────────────────────────────────────────────────────── Picture Element Optimization ──────────────────────────────────────────────────────── */ picture{display:block;line-height:0}picture img{display:block;width:100%}/* ──────────────────────────────────────────────────────── Background Images ──────────────────────────────────────────────────────── */ [style*="background-image"]{background-attachment:scroll;background-repeat:no-repeat;background-size:cover;background-position:center}/* ──────────────────────────────────────────────────────── Hero & Critical Images (Load First) ──────────────────────────────────────────────────────── */ .hero-slider img,.hero-image,.featured-banner img,.banner-image,.product-hero img,[data-critical-image]{loading:eager !important;will-change:opacity;backface-visibility:hidden;-webkit-font-smoothing:antialiased}.carousel:first-of-type img:first-child,.slider:first-of-type img:first-child,.hero-slider:first-of-type img:first-child{loading:eager !important;importance:high}/* ──────────────────────────────────────────────────────── Product Images (Load Fast) ──────────────────────────────────────────────────────── */ .product-grid img,.product-card img,.product-image,.product-thumb,[data-product-image]{loading:eager !important;importance:medium}/* ──────────────────────────────────────────────────────── Thumbnail Images (Lower Priority) ──────────────────────────────────────────────────────── */ .thumbnail,.thumb,.gallery-thumb,.carousel-thumb{loading:eager !important;importance:low}/* ──────────────────────────────────────────────────────── Responsive Images ──────────────────────────────────────────────────────── */ img[srcset]{loading:eager !important}picture source{loading:eager !important}/* ──────────────────────────────────────────────────────── Image Containers (Prevent CLS) ──────────────────────────────────────────────────────── */ .image-wrapper,.img-container,.image-box,figure{position:relative;background-color:var(--bg-secondary,#f5f5f5);overflow:hidden}.image-aspect-1x1{aspect-ratio:1 / 1}.image-aspect-3x2{aspect-ratio:3 / 2}.image-aspect-16x9{aspect-ratio:16 / 9}.image-aspect-4x3{aspect-ratio:4 / 3}/* ──────────────────────────────────────────────────────── Optimize for Different Connection Speeds ──────────────────────────────────────────────────────── */ @media (prefers-reduced-data:no-preference){img{loading:eager !important}}@media (prefers-reduced-data:reduce){img[data-src-low]{content:attr(data-src-low)}}/* ──────────────────────────────────────────────────────── Prevent Flash of Unstyled Image (FOUI) ──────────────────────────────────────────────────────── */ img[src],img.loaded{animation:fadeInImage 0.3s ease-out}@keyframes fadeInImage{from{opacity:0.7;transform:scale(0.98)}to{opacity:1;transform:scale(1)}}/* ──────────────────────────────────────────────────────── Loading State (While images load) ──────────────────────────────────────────────────────── */ img:not([loading="eager"]),img:not([src]),img[src=""]{background:linear-gradient( 90deg,var(--bg-secondary,#f5f5f5) 25%,var(--bg-secondary-lighter,#e0e0e0) 50%,var(--bg-secondary,#f5f5f5) 75% );background-size:200% 100%;animation:shimmer 1.5s infinite}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}img[src][src!=""]:not([src*="placeholder"]){animation:none;background:none}/* ──────────────────────────────────────────────────────── Dark Mode Support ──────────────────────────────────────────────────────── */ [data-theme="dark"] img:not([src]),[data-theme="dark"] img[src=""],[data-theme="dark"] .image-wrapper{background-color:var(--bg-secondary-dark,#2a2a2a)}/* ──────────────────────────────────────────────────────── Mobile Optimization ──────────────────────────────────────────────────────── */ @media (max-width:768px){img{loading:eager !important;display:block;width:100%}.image-wrapper{width:100%;max-width:100%}}/* ──────────────────────────────────────────────────────── Accessibility ──────────────────────────────────────────────────────── */ img[alt=""],img:not([alt]){loading:eager !important}/* ──────────────────────────────────────────────────────── Performance:Prevent Jank ──────────────────────────────────────────────────────── */ img{transform:translateZ(0);will-change:auto}img.loading{will-change:opacity}/* ──────────────────────────────────────────────────────── Reduced Motion Support ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){img{animation:none !important;transition:none !important}}/* ──────────────────────────────────────────────────────── Print Optimization ──────────────────────────────────────────────────────── */ @media print{img{loading:eager !important;max-width:100%;page-break-inside:avoid}}