如何在调用函数前利用图片数组为老虎机保留占位图片

咱们直接针对你的需求来梳理解决步骤，核心就是要让页面加载时显示空白占位图，只有用户点击SPIN按钮才触发随机图片生成：

1. 先给图片元素设置初始占位图 #

首先在HTML里，把slotResult这个img标签的src直接指向你的空白占位图（比如你可以新建一个placeholder.jpg放在img目录下）：

<img id="slotResult" src="./img/placeholder.jpg" alt="Slot Placeholder" />

这样页面一加载，就会直接显示这张占位图，不会出现空白区域。

2. 调整JavaScript代码 #

把自动执行的getRandomImg()删掉，只保留函数定义，再给SPIN按钮绑定点击事件（如果之前没绑定的话）：

// 用const声明变量，避免全局污染，更规范
const imgArray = ['img_1.jpg', 'img_2.jpg', 'img_3.jpg'];

function getRandomImg() {
    const randomIndex = Math.floor(Math.random() * imgArray.length);
    const selectedImg = imgArray[randomIndex];
    const slotResult = document.getElementById('slotResult');
    
    slotResult.src = `./img/${selectedImg}`;
    slotResult.className = 'casino';
}

// 给SPIN按钮绑定点击触发事件，替换成你实际的按钮ID
document.querySelector('#spinButton').addEventListener('click', getRandomImg);

这样一来，只有用户点击按钮时，才会调用函数替换成随机图片，完全符合你的初始需求。

3. 后续扩展3张图片的小建议 #

等你要实现3张随机图片时，只需要把函数改成可复用的版本，给每个图片元素设置独立ID就行：

const imgArray = ['img_1.jpg', 'img_2.jpg', 'img_3.jpg'];

// 新增elementId参数，指定要更新的图片元素
function getRandomImg(elementId) {
    const randomIndex = Math.floor(Math.random() * imgArray.length);
    const selectedImg = imgArray[randomIndex];
    const slotElement = document.getElementById(elementId);
    
    slotElement.src = `./img/${selectedImg}`;
    slotElement.className = 'casino';
}

// 点击按钮时同时更新3张图片
document.querySelector('#spinButton').addEventListener('click', () => {
    getRandomImg('slotResult1');
    getRandomImg('slotResult2');
    getRandomImg('slotResult3');
});

对应的HTML也要改成三个带占位图的img标签：

<img id="slotResult1" src="./img/placeholder.jpg" alt="Slot 1" />
<img id="slotResult2" src="./img/placeholder.jpg" alt="Slot 2" />
<img id="slotResult3" src="./img/placeholder.jpg" alt="Slot 3" />

内容的提问来源于stack exchange，提问作者feasible.creative