如何用最简纯JS（无库）预加载游戏图片并确保game.js延迟执行？

Great question—this is a classic async gotcha in game development, and your idea of using a dedicated preloader.js is totally valid (in fact, it's the standard approach!). Let's break down how to make this work reliably, plus some optimizations to polish it up.

The goal here is to load all required images first, track their progress, and only kick off the game once every asset is ready. We'll store loaded images in an object so we can pass them directly to the game logic later.

// preloader.js
// List all your game's required image assets here
const requiredImages = [
  'assets/player_sprite.png',
  'assets/enemy_sprite.png',
  'assets/background_tile.png',
  // Add any other images your game needs
];

const loadedAssets = {};
let loadedCount = 0;

// Helper function to load a single image
function loadSingleImage(path) {
  const img = new Image();
  
  img.onload = () => {
    loadedAssets[path] = img;
    loadedCount++;
    checkIfAllLoaded();
  };
  
  // Handle failed loads (critical for avoiding broken games!)
  img.onerror = () => {
    console.error(`Failed to load asset: ${path}`);
    // Option 1: Retry the load
    // img.src = path;
    // Option 2: Use a placeholder image
    // loadedAssets[path] = getPlaceholderImage();
    loadedCount++;
    checkIfAllLoaded();
  };
  
  img.src = path;
}

// Check if all images are loaded, then start the game
function checkIfAllLoaded() {
  if (loadedCount === requiredImages.length) {
    console.log('All assets loaded! Starting game...');
    // Call the game's init function (defined in game.js)
    initGame(loadedAssets);
  }
}

// Start the preloading process
requiredImages.forEach(path => loadSingleImage(path));

Instead of running game code immediately when game.js loads, wrap your game setup in an initGame function that accepts the preloaded images. This way, we only initialize the game after all assets are ready.

// game.js
// We'll store our game objects here
let gameObjects = {};

// This function gets called ONLY after all images are preloaded
function initGame(preloadedImages) {
  // Create your game objects with update/draw methods, using preloaded images
  gameObjects.player = {
    image: preloadedImages['assets/player_sprite.png'],
    x: 100,
    y: 300,
    speed: 5,
    
    update() {
      // Player movement logic (example)
      if (keys['ArrowRight']) this.x += this.speed;
      if (keys['ArrowLeft']) this.x -= this.speed;
    },
    
    draw(ctx) {
      ctx.drawImage(this.image, this.x, this.y);
    }
  };

  gameObjects.background = {
    image: preloadedImages['assets/background_tile.png'],
    
    draw(ctx) {
      // Draw background to cover the canvas
      ctx.drawImage(this.image, 0, 0, ctx.canvas.width, ctx.canvas.height);
    }
  };

  // Start the game loop
  requestAnimationFrame(gameLoop);
}

// Game loop (standard update-draw cycle)
function gameLoop() {
  const ctx = document.getElementById('gameCanvas').getContext('2d');
  
  // Clear the canvas each frame
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  
  // Update all game objects (call .update() if it exists)
  Object.values(gameObjects).forEach(obj => obj.update?.());
  
  // Draw all game objects
  Object.values(gameObjects).forEach(obj => obj.draw(ctx));
  
  // Repeat the loop
  requestAnimationFrame(gameLoop);
}

// Optional: Add keyboard input handling (example)
const keys = {};
document.addEventListener('keydown', e => keys[e.key] = true);
document.addEventListener('keyup', e => keys[e.key] = false);

Make sure to load game.js first (so the initGame function exists when the preloader needs it), then preloader.js:

<canvas id="gameCanvas" width="800" height="600"></canvas>

<!-- Load game.js first to define initGame -->
<script src="game.js"></script>
<!-- Then start the preloader -->
<script src="preloader.js"></script>

• Add a loading screen: Update the DOM in preloader.js to show a progress bar (e.g., loadedCount / requiredImages.length * 100% complete) so users don't stare at a blank screen.
• Batch large asset loads: If you have dozens of images, split them into batches (e.g., load background assets first, then characters) and show incremental progress.
• Cache assets: For repeated plays, use localStorage to cache loaded images (though modern browsers already do this automatically for most assets).
• Use sprite sheets: Combine multiple small images into a single sprite sheet to reduce HTTP requests and speed up loading.

This approach completely solves the async problem because we explicitly wait for all assets to load before initializing any game logic that depends on them. Your original idea was spot-on—this is exactly how most 2D games handle asset preloading!

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