预加载图片赋值给其他容器时重复加载？技术问题咨询

Great question! Let’s break down exactly why this is happening and walk through actionable fixes to stop the redundant downloads and page flicker.

Common Causes of Re-Downloads #

1. Mismatched Image URLs #

This is the most likely culprit. If the URL you preload is even slightly different from the URL used when setting the background (e.g., extra slashes, incorrect path formatting, or typos in filename replacement), the browser treats them as entirely separate resources and re-downloads the image.

Looking at your loadBG function:

bgUrl = bgUrl.match(/\/([^.\/]+)\./);
var src = BASE_URL + "assets/" + bgUrl[1].replace("_min", ".jpg");

The regex extraction might not capture the full path correctly, and relying on BASE_URL can introduce mismatches if it’s not properly formatted (e.g., missing a trailing slash or pointing to a different subdomain than the original compressed image).

2. Poor Browser Caching #

If your server doesn’t send proper cache headers for images (like Cache-Control, ETag, or Last-Modified), the browser won’t store the preloaded image in its cache. When you set it as the background, the browser has to re-request it from the server.

3. Misusing jQuery’s ready Event #

Your jQuery preload code uses .ready() on the <img> element, which is not designed for tracking image loading. jQuery’s ready fires when the element is added to the DOM, not when the image’s bytes finish downloading. This means you might be setting the background before the image is actually cached, leading to a re-download.

Fixes to Avoid Re-Downloads #

1. Guarantee URL Consistency #

Instead of extracting the filename and rebuilding the URL with BASE_URL, modify the existing background image URL directly to get the original version. This ensures the URL matches exactly:

function loadBG() {
    var bgUrl = $("body").css('background-image');
    // Strip the url() wrapper and quotes to get the raw URL
    bgUrl = bgUrl.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
    
    if (bgUrl.includes("_min")) {
        // Replace "_min" to get the original image URL
        var src = bgUrl.replace("_min", "");
        preload(src);
    }
}

By using the same base path as the compressed image, you eliminate any path/URL mismatches that would trigger a re-download.

2. Fix the Preload Logic #

Stick with native JavaScript’s onload event for image preloading—it’s far more reliable for tracking when an image finishes loading. Also, add error handling to avoid broken backgrounds:

function preload(src) {
    var img = new Image();
    // For cross-domain images, add this if your server allows it
    // img.crossOrigin = "anonymous";
    
    img.onload = function() {
        console.log("Original image cached successfully");
        // Now set the background—browser will use the cached image
        $("body").css("background-image", `url(${src})`);
        // Clean up the img object if needed
        img = null;
    };
    
    img.onerror = function() {
        console.error("Failed to preload original image:", src);
        // Keep the compressed background if loading fails
    };
    
    img.src = src;
}

Avoid using jQuery’s .ready() for image loading—reserve that for DOM readiness, not asset loading.

3. Verify Server Cache Headers #

Check your server’s response headers for images. You should see headers like:

• Cache-Control: public, max-age=86400 (caches the image for 1 day)
• ETag: "abc123" (enables conditional requests to avoid re-downloads)
• Last-Modified: Wed, 01 Jan 2024 00:00:00 GMT

If these headers are missing or set to disable caching, the browser won’t retain the preloaded image. Adjust your server settings to enable proper caching for image assets.

4. Handle Cross-Domain Images #

If your images are hosted on a different domain, add img.crossOrigin = "anonymous" to your preload function (and ensure the server sends Access-Control-Allow-Origin headers). Without this, browsers often won’t cache cross-domain images, leading to re-downloads.

Testing the Fix #

After implementing these changes:

1. Open your browser’s DevTools > Network tab, filter for images.
2. Reload the page—you should see:
   • One request for the compressed background image.
   • One request for the original image (preloaded).
   • No additional request when setting the original as the background.

This will eliminate the page flicker and redundant downloads.

内容的提问来源于stack exchange，提问作者peterxz