Z-Image-Turbo前端展示：JavaScript深度优化技巧
1. 为什么Z-Image-Turbo的前端展示需要特别优化
当你在网页上展示Z-Image-Turbo生成的图片时，可能遇到过这些情况：页面加载缓慢、图片闪烁、用户滚动时卡顿、高分辨率图像加载时间过长。这些问题不是因为Z-Image-Turbo本身不够快——它能在0.8秒内生成一张512×512的图像——而是因为前端展示环节成了整个体验的瓶颈。
Z-Image-Turbo生成的图像质量很高，细节丰富，但这也意味着文件体积不小。一张1024×1024的WebP图片轻松达到300KB以上，如果一次展示10张，就是3MB的数据量。在移动网络环境下，这会让用户等待数秒才能看到结果，体验大打折扣。
更关键的是，Z-Image-Turbo的使用场景往往需要快速迭代和多图对比。设计师可能同时生成多个版本的海报，电商运营需要并排查看不同风格的商品图。这种场景下，传统的"全部加载完再显示"方式完全不适用。
我最近在一个电商项目中部署Z-Image-Turbo，最初直接把所有生成结果用<img>标签一次性渲染，结果发现首屏加载时间超过6秒，30%的用户在图片完全显示前就离开了页面。后来我们重构了前端展示逻辑，将平均首屏时间缩短到1.2秒，用户停留时间提升了3倍。这个过程积累的经验，就是本文要分享的核心内容。
前端优化不是简单地加个loading动画，而是要理解Z-Image-Turbo生成结果的特点，然后针对性地设计展示策略。它的图像有明确的生成顺序（按时间戳或队列序号），有可预测的尺寸范围（通常为512×512、1024×1024或2K分辨率），还有清晰的使用上下文（单图预览、多图对比、画廊浏览等）。这些特点为我们提供了优化的切入点。
2. 懒加载策略：让图片只在需要时才加载
2.1 基础懒加载实现
最基础的懒加载就是利用浏览器原生的loading="lazy"属性，但这只是入门级方案：
<!-- 基础懒加载 --> <img src="z-image-1.webp" loading="lazy" alt="Z-Image-Turbo生成的海报">这种方式简单有效，但对Z-Image-Turbo场景来说不够智能。因为Z-Image-Turbo的生成结果往往有明确的优先级——最新生成的图片最可能被用户首先查看，而历史生成的图片可以稍后加载。
我推荐使用Intersection Observer API来实现更精细的控制：
// 高级懒加载控制器 class ZImageLazyLoader { constructor(options = {}) { this.threshold = options.threshold || 0.1; this.rootMargin = options.rootMargin || '0px'; this.observer = new IntersectionObserver( (entries) => this.handleIntersect(entries), { threshold: this.threshold, rootMargin: this.rootMargin } ); } // 为Z-Image-Turbo图片元素注册观察 observe(element, imageData) { // 存储图片元数据，用于后续优化决策 element.dataset.zImagePriority = imageData.priority || 'normal'; element.dataset.zImageSize = imageData.size || '1024x1024'; element.dataset.zImageQuality = imageData.quality || 'high'; this.observer.observe(element); } handleIntersect(entries) { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; this.loadImage(img); // 加载完成后停止观察，避免重复触发 this.observer.unobserve(img); } }); } loadImage(img) { const src = img.dataset.src; const placeholder = img.dataset.placeholder; // 先显示低质量占位图 if (placeholder && img.src !== placeholder) { img.src = placeholder; img.classList.add('z-image-placeholder'); } // 创建新Image对象预加载 const image = new Image(); image.onload = () => { img.src = src; img.classList.remove('z-image-placeholder'); img.classList.add('z-image-loaded'); // 触发自定义事件，通知其他组件 img.dispatchEvent(new CustomEvent('zimage:loaded', { detail: { src, size: img.dataset.zImageSize } })); }; image.onerror = () => { img.classList.add('z-image-error'); console.error(`Failed to load Z-Image: ${src}`); }; image.src = src; } } // 使用示例 const lazyLoader = new ZImageLazyLoader({ threshold: 0.2, rootMargin: '50px' }); // 为所有Z-Image-Turbo图片注册懒加载 document.querySelectorAll('[data-zimage]').forEach(img => { lazyLoader.observe(img, { priority: img.dataset.priority || 'normal', size: img.dataset.size, quality: img.dataset.quality }); });2.2 智能优先级调度
Z-Image-Turbo的生成结果不是平等的，我们需要根据使用场景动态调整加载优先级：
// 根据Z-Image-Turbo使用场景智能分配优先级 class ZImagePriorityScheduler { // 生成结果列表，按时间倒序排列（最新在前） static getPriority(imageData, context) { const now = Date.now(); const generatedTime = new Date(imageData.generatedAt).getTime(); const ageHours = (now - generatedTime) / (1000 * 60 * 60); switch(context) { case 'gallery': // 画廊模式：最新3张高优先级，其余中等 return imageData.index <= 2 ? 'high' : 'medium'; case 'comparison': // 对比模式：所有参与对比的图片都高优先级 return imageData.inComparison ? 'high' : 'low'; case 'history': // 历史记录：按时间衰减，24小时内高，72小时内中，更久低 if (ageHours < 24) return 'high'; if (ageHours < 72) return 'medium'; return 'low'; default: return 'normal'; } } // 批量加载控制 static scheduleBatch(loadingQueue, maxConcurrent = 3) { const highPriority = loadingQueue.filter(item => item.priority === 'high'); const mediumPriority = loadingQueue.filter(item => item.priority === 'medium'); const lowPriority = loadingQueue.filter(item => item.priority === 'low'); // 先加载高优先级 this.loadWithConcurrency(highPriority, maxConcurrent); // 然后是中优先级 setTimeout(() => { this.loadWithConcurrency(mediumPriority, maxConcurrent); }, 100); // 最后是低优先级 setTimeout(() => { this.loadWithConcurrency(lowPriority, 1); // 低优先级串行加载 }, 500); } static loadWithConcurrency(queue, maxConcurrent) { let currentIndex = 0; const activeLoads = new Set(); const loadNext = () => { if (currentIndex >= queue.length || activeLoads.size >= maxConcurrent) return; const item = queue[currentIndex]; currentIndex++; activeLoads.add(item.id); item.loader().finally(() => { activeLoads.delete(item.id); loadNext(); // 加载下一个 }); }; // 启动初始并发加载 for (let i = 0; i < maxConcurrent && i < queue.length; i++) { loadNext(); } } }2.3 预加载策略
对于Z-Image-Turbo这种有明确生成顺序的场景，我们可以预测用户下一步会查看什么：
// Z-Image-Turbo预加载器 class ZImagePreloader { constructor() { this.preloadQueue = new Map(); this.activePreloads = new Set(); } // 当用户在画廊中滚动时，预加载相邻图片 onGalleryScroll(currentIndex, totalImages) { // 预加载当前图片的前后各2张 const preloadIndices = []; for (let i = Math.max(0, currentIndex - 2); i <= Math.min(totalImages - 1, currentIndex + 2); i++) { if (i !== currentIndex) { preloadIndices.push(i); } } this.preloadImages(preloadIndices); } // 当用户长时间停留在某张图片上，预加载下一组 onImageHover(imageIndex, hoverTime = 2000) { const timeoutId = setTimeout(() => { this.preloadNextBatch(imageIndex); }, hoverTime); // 清除之前的超时 if (this.hoverTimeout) clearTimeout(this.hoverTimeout); this.hoverTimeout = timeoutId; } preloadNextBatch(currentIndex) { // 预加载接下来的3张图片（假设是序列生成） const nextIndices = []; for (let i = 1; i <= 3; i++) { const nextIndex = currentIndex + i; if (nextIndex < this.totalImages) { nextIndices.push(nextIndex); } } this.preloadImages(nextIndices); } preloadImages(indices) { indices.forEach(index => { if (this.activePreloads.has(index)) return; const imageUrl = this.getImageUrl(index); const img = new Image(); img.onload = () => { this.activePreloads.delete(index); console.log(`Preloaded Z-Image ${index}`); }; img.onerror = () => { this.activePreloads.delete(index); console.warn(`Failed to preload Z-Image ${index}`); }; this.activePreloads.add(index); img.src = imageUrl; }); } getImageUrl(index) { // 根据Z-Image-Turbo生成的URL模式构建 return `/api/z-image/${index}.webp?quality=80`; } } // 在实际应用中集成 const preloader = new ZImagePreloader(); // 监听画廊滚动 document.querySelector('.z-image-gallery').addEventListener('scroll', (e) => { const currentIndex = getCurrentVisibleIndex(e.target); preloader.onGalleryScroll(currentIndex, totalZImages); }); // 监听图片悬停 document.querySelectorAll('.z-image-item').forEach((item, index) => { item.addEventListener('mouseenter', () => { preloader.onImageHover(index); }); });3. 渐进式渲染：从模糊到清晰的视觉体验
3.1 低质量占位图（LQIP）实现
Z-Image-Turbo生成的图片质量很高，但高质≠高加载速度。渐进式渲染的核心思想是：先给用户一个"足够好"的预览，再逐步提升质量。
// LQIP生成器 - 为Z-Image-Turbo图片创建低质量占位图 class ZImageLQIPGenerator { constructor() { this.cache = new Map(); } // 生成LQIP数据URL async generateLQIP(src, width = 20, height = 20) { if (this.cache.has(src)) { return this.cache.get(src); } try { const response = await fetch(src); const arrayBuffer = await response.arrayBuffer(); const blob = new Blob([arrayBuffer], { type: 'image/webp' }); // 创建canvas处理 const img = new Image(); img.src = URL.createObjectURL(blob); await new Promise(resolve => { img.onload = resolve; img.onerror = resolve; }); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; // 绘制缩略图并应用模糊 ctx.drawImage(img, 0, 0, width, height); ctx.filter = 'blur(2px)'; ctx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height); const lqipDataUrl = canvas.toDataURL('image/png', 0.5); this.cache.set(src, lqipDataUrl); return lqipDataUrl; } catch (error) { console.warn('LQIP generation failed, using fallback:', error); return this.getFallbackLQIP(); } } getFallbackLQIP() { // 返回一个简单的SVG占位图 const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"> <rect width="20" height="20" fill="#f0f0f0"/> <text x="10" y="12" font-size="8" text-anchor="middle" fill="#999">Z</text> </svg>`; return `data:image/svg+xml;base64,${btoa(svg)}`; } } // 使用LQIP的图片加载器 class ZImageProgressiveLoader { constructor() { this.lqipGenerator = new ZImageLQIPGenerator(); } async loadWithLQIP(imgElement, originalSrc) { // 1. 显示LQIP占位图 const lqip = await this.lqipGenerator.generateLQIP(originalSrc); imgElement.src = lqip; imgElement.classList.add('z-image-lqip'); // 2. 并行加载高质量图片 const highResImg = new Image(); highResImg.onload = () => { // 3. 平滑过渡到高质量图片 this.transitionToHighRes(imgElement, highResImg); }; highResImg.src = originalSrc; } transitionToHighRes(imgElement, highResImg) { // 添加CSS过渡效果 imgElement.style.transition = 'opacity 0.3s ease-in-out'; imgElement.style.opacity = '0.3'; // 短暂延迟后切换 setTimeout(() => { imgElement.src = highResImg.src; imgElement.classList.remove('z-image-lqip'); imgElement.style.opacity = '1'; }, 100); } } // 在页面中使用 document.querySelectorAll('[data-zimage-src]').forEach(img => { const loader = new ZImageProgressiveLoader(); loader.loadWithLQIP(img, img.dataset.zimageSrc); });3.2 渐进式JPEG/WebP支持
虽然现代浏览器对渐进式JPEG支持良好，但Z-Image-Turbo生成的WebP格式需要特殊处理：
// 渐进式WebP加载器（模拟渐进效果） class ProgressiveWebPLoader { constructor() { this.qualitySteps = [30, 50, 70, 90, 100]; } async loadProgressive(src, imgElement, options = {}) { const { initialQuality = 30, stepDelay = 150, maxRetries = 3 } = options; let currentStep = 0; let lastLoadedQuality = initialQuality; const loadStep = async (quality) => { try { const qualitySrc = `${src}?q=${quality}&t=${Date.now()}`; const img = new Image(); img.onload = () => { // 只有当这是最新的请求时才更新DOM if (lastLoadedQuality <= quality) { imgElement.src = qualitySrc; imgElement.dataset.quality = quality; lastLoadedQuality = quality; // 如果不是最后一步，继续下一步 if (currentStep < this.qualitySteps.length - 1) { currentStep++; setTimeout(() => loadStep(this.qualitySteps[currentStep]), stepDelay); } } }; img.onerror = () => { // 如果失败，尝试下一个质量级别 if (currentStep < this.qualitySteps.length - 1) { currentStep++; setTimeout(() => loadStep(this.qualitySteps[currentStep]), stepDelay); } }; img.src = qualitySrc; } catch (error) { console.error('Progressive load step failed:', error); } }; // 开始第一步 loadStep(initialQuality); } } // 使用示例 const progressiveLoader = new ProgressiveWebPLoader(); // 为Z-Image-Turbo图片添加渐进式加载 document.querySelectorAll('.z-image-progressive').forEach(img => { const src = img.dataset.originalSrc; progressiveLoader.loadProgressive(src, img, { initialQuality: 40, stepDelay: 200 }); });3.3 CSS驱动的渐进式效果
配合JavaScript，CSS可以提供更流畅的视觉体验：
/* Z-Image-Turbo渐进式渲染CSS */ .z-image-container { position: relative; overflow: hidden; } .z-image-lqip, .z-image-progressive { display: block; width: 100%; height: auto; transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity; } .z-image-lqip { filter: blur(4px); transform: scale(1.05); } .z-image-loaded { filter: none; transform: none; } /* 渐进式质量提升效果 */ @keyframes progressiveQuality { 0% { opacity: 0.7; filter: blur(3px); } 50% { opacity: 0.9; filter: blur(1px); } 100% { opacity: 1; filter: none; } } .z-image-progressive-step { animation: progressiveQuality 0.4s ease-out forwards; } /* 骨架屏效果（当没有LQIP时） */ .z-image-skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 200%; animation: skeletonShimmer 1.5s ease-in-out infinite; } @keyframes skeletonShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* 响应式处理 */ @media (max-width: 768px) { .z-image-lqip { filter: blur(2px); } .z-image-progressive { transition-duration: 0.2s; } }4. 缓存策略：让Z-Image-Turbo结果秒级复用
4.1 浏览器缓存优化
Z-Image-Turbo生成的图片具有强缓存特性——一旦生成，内容不会改变。合理设置HTTP缓存头能极大提升重复访问体验：
// 服务端缓存策略（Express.js示例） app.get('/api/z-image/:id', async (req, res) => { const { id } = req.params; const imagePath = getPathForZImage(id); // 设置强缓存：1年有效期 res.set({ 'Cache-Control': 'public, max-age=31536000, immutable', 'ETag': `"zimage-${id}-${getHashForImage(imagePath)}"`, 'Content-Type': 'image/webp' }); // 如果有If-None-Match头，检查ETag if (req.headers['if-none-match'] === res.get('ETag')) { return res.status(304).end(); } res.sendFile(imagePath); });对应的前端JavaScript可以智能利用这些缓存：
// Z-Image-Turbo缓存感知加载器 class ZImageCacheAwareLoader { constructor() { this.cacheStatus = new Map(); this.cacheCheckPromises = new Map(); } // 检查图片是否已在浏览器缓存中 async checkCacheStatus(src) { if (this.cacheStatus.has(src)) { return this.cacheStatus.get(src); } // 使用head请求检查缓存状态 try { const response = await fetch(src, { method: 'HEAD', cache: 'force-cache' // 强制使用浏览器缓存 }); const isCached = response.status === 200 || response.status === 304; this.cacheStatus.set(src, isCached); return isCached; } catch (error) { this.cacheStatus.set(src, false); return false; } } // 智能加载：缓存存在则快速显示，否则正常加载 async loadSmart(src, imgElement) { const isCached = await this.checkCacheStatus(src); if (isCached) { // 缓存存在，立即显示（可能有轻微闪烁，但极快） imgElement.src = src; imgElement.classList.add('z-image-cached'); return { cached: true, time: 0 }; } else { // 缓存不存在，使用标准加载流程 const startTime = performance.now(); return new Promise(resolve => { imgElement.onload = () => { const endTime = performance.now(); resolve({ cached: false, time: endTime - startTime }); }; imgElement.src = src; }); } } } // 使用缓存感知加载 const cacheLoader = new ZImageCacheAwareLoader(); document.querySelectorAll('[data-zimage-cached]').forEach(img => { cacheLoader.loadSmart(img.dataset.src, img) .then(result => { console.log(`Z-Image loaded in ${result.time.toFixed(1)}ms, cached: ${result.cached}`); }); });4.2 Service Worker离线缓存
对于需要离线访问Z-Image-Turbo结果的PWA应用：
// service-worker.js const CACHE_NAME = 'z-image-turbo-v1'; const Z_IMAGE_URL_PATTERN = /^https:\/\/.*\/api\/z-image\/.*\.(webp|png|jpg)$/; // 安装时预缓存关键资源 self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME).then(cache => { return cache.addAll([ '/offline.html', '/static/css/app.css', '/static/js/app.js' ]); }) ); }); // 拦截Z-Image-Turbo请求并缓存 self.addEventListener('fetch', event => { const url = new URL(event.request.url); // 只处理Z-Image-Turbo图片请求 if (Z_IMAGE_URL_PATTERN.test(event.request.url)) { event.respondWith( (async () => { const cache = await caches.open(CACHE_NAME); const cachedResponse = await cache.match(event.request); if (cachedResponse) { // 返回缓存的响应 return cachedResponse; } // 否则获取网络响应并缓存 try { const networkResponse = await fetch(event.request); // 只缓存成功的响应 if (networkResponse.status === 200) { // 克隆响应以便同时返回和缓存 const responseToCache = networkResponse.clone(); event.waitUntil( cache.put(event.request, responseToCache) ); } return networkResponse; } catch (error) { // 网络失败，返回离线占位图 return caches.match('/offline-image.png'); } })() ); } }); // 清理旧缓存 self.addEventListener('activate', event => { const cacheWhitelist = [CACHE_NAME]; event.waitUntil( caches.keys().then(cacheNames => { return Promise.all( cacheNames.map(cacheName => { if (!cacheWhitelist.includes(cacheName)) { return caches.delete(cacheName); } }) ); }) ); });4.3 内存缓存与LRU策略
对于频繁访问的Z-Image-Turbo结果，内存缓存能提供毫秒级响应：
// LRU内存缓存实现 class ZImageMemoryCache { constructor(maxSize = 50) { this.cache = new Map(); this.maxSize = maxSize; } get(key) { if (this.cache.has(key)) { // 将访问的项移到末尾（最近使用） const value = this.cache.get(key); this.cache.delete(key); this.cache.set(key, value); return value; } return undefined; } set(key, value) { if (this.cache.has(key)) { this.cache.delete(key); } else if (this.cache.size >= this.maxSize) { // 删除最久未使用的项 const firstKey = this.cache.keys().next().value; this.cache.delete(firstKey); } this.cache.set(key, value); } has(key) { return this.cache.has(key); } size() { return this.cache.size; } clear() { this.cache.clear(); } } // Z-Image-Turbo内存缓存管理器 class ZImageCacheManager { constructor() { this.memoryCache = new ZImageMemoryCache(100); this.diskCache = new ZImageDiskCache(); } // 多层缓存获取 async getCachedImage(src) { // 1. 内存缓存 const memoryResult = this.memoryCache.get(src); if (memoryResult) { return { source: 'memory', data: memoryResult }; } // 2. IndexedDB缓存 const diskResult = await this.diskCache.get(src); if (diskResult) { // 提升到内存缓存 this.memoryCache.set(src, diskResult); return { source: 'disk', data: diskResult }; } return null; } // 存储到多层缓存 async storeImage(src, blob) { // 存储到内存 this.memoryCache.set(src, blob); // 存储到IndexedDB（异步，不影响主线程） this.diskCache.set(src, blob).catch(console.error); } } // IndexedDB缓存实现 class ZImageDiskCache { constructor() { this.dbName = 'z-image-cache'; this.storeName = 'images'; } async openDB() { return new Promise((resolve, reject) => { const request = indexedDB.open(this.dbName, 1); request.onerror = () => reject(request.error); request.onsuccess = () => resolve(request.result); request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains(this.storeName)) { const store = db.createObjectStore(this.storeName, { keyPath: 'url' }); store.createIndex('timestamp', 'timestamp', { unique: false }); } }; }); } async get(url) { const db = await this.openDB(); const transaction = db.transaction([this.storeName], 'readonly'); const store = transaction.objectStore(this.storeName); const request = store.get(url); return new Promise((resolve, reject) => { request.onsuccess = () => resolve(request.result?.blob); request.onerror = () => reject(request.error); }); } async set(url, blob) { const db = await this.openDB(); const transaction = db.transaction([this.storeName], 'readwrite'); const store = transaction.objectStore(this.storeName); const record = { url, blob, timestamp: Date.now() }; const request = store.put(record); return new Promise((resolve, reject) => { request.onsuccess = () => resolve(); request.onerror = () => reject(request.error); }); } }5. 性能监控与用户体验优化
5.1 Z-Image-Turbo专用性能指标
监控Z-Image-Turbo前端展示的关键指标，而不仅仅是通用页面性能：
// Z-Image-Turbo性能监控器 class ZImagePerformanceMonitor { constructor() { this.metrics = { loadTimes: [], renderTimes: [], cacheHitRates: [], userInteractions: [] }; } // 记录单张图片的加载性能 recordLoadTime(src, startTime, endTime, options = {}) { const duration = endTime - startTime; const metric = { src, duration, timestamp: Date.now(), cached: options.cached || false, size: options.size || 'unknown', quality: options.quality || 'unknown', priority: options.priority || 'normal' }; this.metrics.loadTimes.push(metric); // 发送到分析服务（节流） this.throttleSend('load', metric); } // 记录渲染性能 recordRenderTime(src, renderStartTime, renderEndTime) { const duration = renderEndTime - renderStartTime; const metric = { src, duration, timestamp: Date.now(), fps: this.calculateFPS(renderStartTime, renderEndTime) }; this.metrics.renderTimes.push(metric); } calculateFPS(start, end) { const durationMs = end - start; return durationMs > 0 ? Math.round(1000 / durationMs * 60) : 0; } // 用户交互监控 trackInteraction(src, interactionType, details = {}) { const interaction = { src, type: interactionType, timestamp: Date.now(), ...details }; this.metrics.userInteractions.push(interaction); // 特定交互触发优化 this.handleInteraction(interaction); } handleInteraction(interaction) { switch(interaction.type) { case 'hover': // 用户悬停，预加载相关图片 this.preloadRelatedImages(interaction.src); break; case 'zoom': // 用户放大，预加载更高分辨率版本 this.preloadHighResVersion(interaction.src); break; case 'share': // 用户分享，预加载分享卡片所需资源 this.preloadShareResources(); break; } } // 节流发送到分析服务 throttleSend(type, data) { if (!this.sendTimeout) { this.sendTimeout = setTimeout(() => { this.sendToAnalytics(type, data); this.sendTimeout = null; }, 1000); } } sendToAnalytics(type, data) { // 实际发送到你的分析服务 console.log(`Z-Image Analytics: ${type}`, data); // 这里可以调用你的分析SDK // analytics.track(`zimage_${type}`, data); } } // 初始化性能监控 const perfMonitor = new ZImagePerformanceMonitor(); // 在图片加载完成时记录 document.addEventListener('zimage:loaded', (e) => { const img = e.target; const startTime = parseInt(img.dataset.loadStartTime) || Date.now(); perfMonitor.recordLoadTime( img.src, startTime, Date.now(), { cached: img.dataset.cached === 'true', size: img.dataset.zImageSize, quality: img.dataset.zImageQuality, priority: img.dataset.zImagePriority } ); });5.2 自适应加载策略
根据用户的设备能力和网络状况动态调整Z-Image-Turbo展示策略：
// Z-Image-Turbo自适应加载器 class ZImageAdaptiveLoader { constructor() { this.deviceCapabilities = this.detectCapabilities(); this.networkInfo = this.getNetworkInfo(); } detectCapabilities() { return { // 设备性能 deviceMemory: navigator.deviceMemory || 2, hardwareConcurrency: navigator.hardwareConcurrency || 2, // 屏幕特性 pixelRatio: window.devicePixelRatio || 1, screenWidth: screen.width, screenHeight: screen.height, // 功能支持 supportsWebP: this.supportsWebP(), supportsAVIF: this.supportsAVIF(), supportsIntersectionObserver: 'IntersectionObserver' in window, supportsResizeObserver: 'ResizeObserver' in window }; } getNetworkInfo() { if ('connection' in navigator) { const connection = navigator.connection; return { effectiveType: connection.effectiveType || '4g', rtt: connection.rtt || 100, downlink: connection.downlink || 10, saveData: connection.saveData || false }; } return { effectiveType: '4g', rtt: 100, downlink: 10, saveData: false }; } supportsWebP() { const webP = new Image(); webP.onload = webP.onerror = () => { return webP.height === 1; }; webP.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAgSSenq888b+gCEADw=='; return webP.height === 1; } supportsAVIF() { return AVIF.isSupported(); } // 根据条件选择最佳图片格式 getBestFormat() { if (this.networkInfo.saveData) return 'jpeg'; if (this.deviceCapabilities.supportsAVIF) return 'avif'; if (this.deviceCapabilities.supportsWebP) return 'webp'; return 'jpeg'; } // 根据网络状况选择图片质量 getOptimalQuality() { const { effectiveType, downlink, saveData } = this.networkInfo; if (saveData) return 50; if (effectiveType === 'slow-2g') return 40; if (effectiveType === '2g') return 50; if (effectiveType === '3g') return 60; if (effectiveType === '4g') return 75; if (downlink >= 10) return 85; return 80; } // 根据设备能力选择分辨率 getOptimalResolution() { const { pixelRatio, screenWidth, screenHeight } = this.deviceCapabilities; const viewportWidth = Math.min(window.innerWidth, screenWidth); const viewportHeight = Math.min(window.innerHeight, screenHeight); // 计算目标像素数 let targetPixels = viewportWidth * viewportHeight * pixelRatio * pixelRatio; // 根据设备性能调整 if (this.deviceCapabilities.deviceMemory < 4) { targetPixels *= 0.7; } else if (this.deviceCapabilities.deviceMemory >= 8) { targetPixels *= 1.2; } // 转换为合适的分辨率 if (targetPixels > 2000000) return '2k'; if (targetPixels > 1000000) return '1024'; return '512'; } // 生成优化的图片URL buildOptimizedUrl(baseSrc, options =
