window.onload 有时失效，根本原因在于它虽等待 DOM 和资源加载完成，却无法保证异步 fetch 操作已结束；正确做法是将 fetchProducts() 放入 onload 回调中并用 async/await 串行控制执行时序。
`window.onload` 有时失效，根本原因在于它虽等待 dom 和资源加载完成，却无法保证异步 `fetch` 操作已结束；正确做法是将 `fetchproducts()` 放入 `onload` 回调中并用 `async/await` 串行控制执行时序。
在 Web 开发中，window.onload 常被误认为“页面完全就绪”的万能钩子——但它仅保证 HTML 文档、样式表、脚本、图片等外部资源加载完毕，并不感知 JavaScript 中异步操作（如 fetch）的完成状态。你当前代码中存在典型的竞态问题：
fetchProducts(); // ⚠️ 全局立即调用：异步发起请求，但不等待响应
window.onload = () => {
filterProduct("all"); // ❌ 此时 products 还未渲染，filter 无效果
};当 window.onload 触发时，fetchProducts() 可能仍在网络请求或解析 JSON 阶段，displayProducts() 尚未执行，导致 #products 容器为空，filterProduct("all") 实际上在操作一个空列表，自然“看似失效”。
✅ 正确解决方案：统一入口 + 异步时序控制
将所有初始化逻辑收敛至 window.onload，并使用 async/await 确保依赖关系严格有序：
const productsJsonFile = '../products.json';
async function fetchProducts() {
try {
const response = await fetch(productsJsonFile);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const products = await response.json();
displayProducts(products);
} catch (error) {
console.error('❌ Failed to load products:', error);
document.getElementById("products").innerHTML =
'<div class="error">Failed to load product data. Please check the JSON file path and network.</div>';
}
}
function displayProducts(products) {
const productContainer = document.getElementById("products");
if (!productContainer) return;
products.forEach(product => {
const card = document.createElement("div");
card.className = `card ${product.category} hide`;
const imgContainer = document.createElement("div");
imgContainer.className = "image-container";
const image = document.createElement("img");
image.src = product.image;
imgContainer.appendChild(image);
card.appendChild(imgContainer);
const container = document.createElement("div");
container.className = "container2";
const name = document.createElement("h5");
name.className = "product-name";
name.textContent = product.name.toUpperCase();
container.appendChild(name);
const rating = document.createElement("div");
rating.className = "rating";
for (let i = 1; i <= 5; i++) {
const star = document.createElement("i");
star.className = "fa";
if (i <= product.rating) {
star.classList.add("fa-star");
} else if (Math.abs(i - 0.5 - product.rating) < 0.1) {
star.classList.add("fa-star-half-o");
} else {
star.classList.add("fa-star-o");
}
rating.appendChild(star);
}
container.appendChild(rating);
const price = document.createElement("h6");
price.className = "price";
price.textContent = `Php ${product.price}.00`;
container.appendChild(price);
card.appendChild(container);
productContainer.appendChild(card);
});
}
function filterProduct(value) {
// 激活按钮状态
document.querySelectorAll(".button-value").forEach(btn => {
btn.classList.toggle("active-cat", btn.textContent.trim().toUpperCase() === value.toUpperCase());
});
// 过滤卡片
document.querySelectorAll(".card").forEach(card => {
if (value === "all") {
card.classList.remove("hide");
} else {
card.classList.toggle("hide", !card.classList.contains(value));
}
});
}
// ✅ 关键修复：onload 内统一协调异步流程
window.onload = async () => {
await fetchProducts(); // 等待数据获取并渲染完成
filterProduct("all"); // 再执行过滤（此时 DOM 已有真实卡片）
};⚠️ 重要注意事项
- 移除全局 fetchProducts() 调用：原代码末尾的 fetchProducts(); 必须删除，否则会与 onload 中的调用竞争，导致重复渲染或状态混乱。
- 错误边界处理：示例中补充了 response.ok 检查和更友好的错误 UI，避免静默失败。
- DOM 存在性校验：displayProducts 中添加 if (!productContainer) return，防止因元素未找到引发异常。
-
兼容性提示：window.onload 在现代开发中逐渐被 DOMContentLoaded 替代（它不等待图片等资源），但若逻辑依赖图片尺寸或第三方资源，onload 仍是合理选择。如仅需 DOM 就绪，可改用：
document.addEventListener("DOMContentLoaded", async () => { await fetchProducts(); filterProduct("all"); });
总结
window.onload 失效的本质是同步钩子与异步操作的时序错配。解决的核心逻辑不是“修 onload”，而是重构初始化流程：将数据获取、DOM 渲染、交互初始化组成一条受控的异步链路。通过 async/await 显式声明依赖，即可彻底消除不确定性，让页面每次加载都稳定可靠。
