// ==UserScript==
// @name         Webp图片加载优化
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Optimize image loading by adding lazy loading, WebP support, and concurrent requests.
// @author       KiwiFruit
// @match        *://*/*
// @grant        none
// @license MIT
// @downloadURL none
// ==/UserScript==

(function() {
    'use strict';

    // 检查浏览器是否支持WebP
    function supportsWebP(callback) {
        const webP = new Image();
        webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMwMAAgH8JeYW5kZXI=';
        webP.onload = webP.onerror = function () {
            callback(webP.height === 2);
        };
    }

    // 动态替换为WebP图片（如果有）
    function replaceWithWebP(imageElement) {
        const originalSrc = imageElement.src;
        const webPSrc = originalSrc.replace(/\.(jpg|jpeg|png)$/, '.webp');
        const img = new Image();

        img.src = webPSrc;
        img.onload = function() {
            imageElement.src = webPSrc;
        };

        img.onerror = function() {
            console.log(`WebP version not found for ${originalSrc}, using original.`);
        };
    }

    // 并发加载图片
    function loadImages(imageUrls) {
        return Promise.all(imageUrls.map(url => {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = url;
                img.onload = resolve;
                img.onerror = reject;
            });
        }));
    }

    // 应用懒加载和WebP优化
    function optimizeImages() {
        const images = document.querySelectorAll('img');

        images.forEach(img => {
            // 添加懒加载属性
            if (!img.getAttribute('loading')) {
                img.setAttribute('loading', 'lazy');
            }

            // 如果支持WebP，则尝试替换为WebP图片
            supportsWebP((isSupported) => {
                if (isSupported) {
                    replaceWithWebP(img);
                }
            });
        });

        // 获取所有图片的URL，准备并发加载
        const imageUrls = Array.from(images).map(img => img.src);

        if (imageUrls.length > 0) {
            loadImages(imageUrls).then(() => {
                console.log('所有图片已加载');
            }).catch(error => {
                console.error('图片加载失败:', error);
            });
        }
    }

    // 确保DOM完全加载后再执行优化
    window.addEventListener('load', () => {
        optimizeImages();
    });

    // 监听DOM变化，确保动态加载的内容也能被优化
    const observer = new MutationObserver(optimizeImages);
    observer.observe(document.body, { childList: true, subtree: true });
})();