图片预加载是前端优化中常用的策略，通过提前将图片资源缓存到浏览器中，能够显著提升用户在图片密集型网站上的浏览体验。无论是相册类应用还是电商产品展示页，预加载都能确保图片快速、流畅地呈现。本文介绍三种不同的预加载实现方案。

方案一：CSS与JavaScript结合预加载

利用CSS的background属性将图片加载到屏幕外区域是一种简单直接的预加载方式：

.preload-cache-1 { background: url(https://example.com/assets/img-01.png) no-repeat -9999px -9999px; }
.preload-cache-2 { background: url(https://example.com/assets/img-02.png) no-repeat -9999px -9999px; }
.preload-cache-3 { background: url(https://example.com/assets/img-03.png) no-repeat -9999px -9999px; }

将这些样式类应用到HTML元素后，浏览器会在渲染时预加载这些图片到缓存中。当页面其他位置需要使用相同路径的图片时，直接从缓存读取。但这种方式的缺点是预加载与页面主体内容同时进行，可能拖慢首屏渲染速度。

通过JavaScript可以延迟预加载时机，待页面加载完成后再执行：

function initImageCache() {
    if (document.getElementById) {
        document.getElementById('preload-cache-1').style.background = 'url(https://example.com/assets/img-01.png) no-repeat -9999px -9999px';
        document.getElementById('preload-cache-2').style.background = 'url(https://example.com/assets/img-02.png) no-repeat -9999px -9999px';
        document.getElementById('preload-cache-3').style.background = 'https://example.com/assets/img-03.png) no-repeat -9999px -9999px';
    }
}

function bindLoadHandler(fn) {
    var prevHandler = window.onload;
    if (typeof window.onload !== 'function') {
        window.onload = fn;
    } else {
        window.onload = function() {
            if (prevHandler) prevHandler();
            fn();
        }
    }
}

bindLoadHandler(initImageCache);

方案二：纯JavaScript预加载

使用JavaScript的Image对象是另一种常见的预加载方式。以下是通过数组遍历实现批量预加载的方法：

function preloadImageBatch() {
    var imageList = arguments;
    var cache = [];
    for (var idx = 0; idx < imageList.length; idx++) {
        cache[idx] = new Image();
        cache[idx].src = imageList[idx];
    }
}

preloadImageBatch(
    'https://example.com/gallery/photo-001.jpg',
    'https://example.com/gallery/photo-002.jpg',
    'https://example.com/gallery/photo-003.jpg'
);

对于少量图片，也可以采用逐个声明的方式：

function setupImageCache() {
    if (document.images) {
        var photoA = new Image();
        var photoB = new Image();
        var photoC = new Image();
        photoA.src = 'https://example.com/path/to/photo-a.gif';
        photoB.src = 'https://example.com/path/to/photo-b.gif';
        photoC.src = 'https://example.com/path/to/photo-c.gif';
    }
}

function deferUntilReady(callback) {
    var existingHandler = window.onload;
    if (typeof window.onload !== 'function') {
        window.onload = callback;
    } else {
        window.onload = function() {
            if (existingHandler) existingHandler();
            callback();
        }
    }
}

deferUntilReady(setupImageCache);

方案三：基于Ajax与DOM的预加载方案

Ajax预加载的优势在于可以同时预加载多种资源类型（图片、CSS、JS），且不会影响当前页面的渲染和执行：

window.addEventListener('load', function() {
    setTimeout(function() {
        // 通过XMLHttpRequest预加载脚本和样式
        var request = new XMLHttpRequest();
        request.open('GET', 'https://example.com/resources/app.js');
        request.send(null);
        
        request = new XMLHttpRequest();
        request.open('GET', 'https://example.com/resources/app.css');
        request.send(null);
        
        // 预加载图片
        new Image().src = 'https://example.com/resources/hero.png';
    }, 1000);
});

通过DOM操作动态插入资源元素的方式也能达到类似效果：

window.addEventListener('load', function() {
    setTimeout(function() {
        var docHead = document.querySelector('head');
        
        // 动态创建样式表链接
        var styleLink = document.createElement('link');
        styleLink.setAttribute('type', 'text/css');
        styleLink.setAttribute('rel', 'stylesheet');
        styleLink.setAttribute('href', 'https://example.com/resources/app.css');
        
        // 动态创建脚本标签
        var scriptTag = document.createElement('script');
        scriptTag.setAttribute('type', 'text/javascript');
        scriptTag.setAttribute('src', 'https://example.com/resources/app.js');
        
        // 插入DOM触发加载
        docHead.appendChild(styleLink);
        docHead.appendChild(scriptTag);
        
        // 预加载图片资源
        new Image().src = 'https://example.com/resources/hero.png';
    }, 1000);
});

上述代码中设置了1秒的延迟，目的是确保预加载操作不会干扰页面初始渲染和交互响应。通过Ajax方式预加载的资源不会立即作用于当前页面，避免了样式覆盖或脚本冲突等问题。