求JavaScript实现：检测到指定图片显示时自动刷新页面的功能

首先，你的代码存在几个核心问题：

• 代码未闭合（缺少 } 来结束 setInterval 的回调函数）
• 逻辑方向错误：你是在设置图片的 src 属性，而非检测页面中是否存在该图片
• 未定义 selector 变量，无法定位到具体元素

下面是实现需求的正确代码：

// 定义要检测的目标图片URL
const targetImageUrl = 'localhost/product/image1.jpg';

// 启动定时检测
const imageChecker = setInterval(() => {
    // 查找所有src匹配目标URL的图片元素
    const matchedImages = document.querySelectorAll(`img[src="${targetImageUrl}"]`);
    
    if (matchedImages.length > 0) {
        // 检查图片是否在视口中可见（避免触发隐藏图片的情况）
        let isImageVisible = false;
        matchedImages.forEach(img => {
            const rect = img.getBoundingClientRect();
            if (rect.top < window.innerHeight && rect.bottom > 0 && rect.left < window.innerWidth && rect.right > 0) {
                isImageVisible = true;
            }
        });
        
        if (isImageVisible) {
            // 清除定时器，防止重复触发刷新
            clearInterval(imageChecker);
            // 执行页面刷新
            window.location.reload();
        }
    }
}, 1000); // 每1秒检测一次，可根据需求调整间隔（如500ms）

代码说明 #

• 使用 document.querySelectorAll 精准定位所有匹配目标URL的图片
• 通过 getBoundingClientRect() 判断图片是否在当前视口中可见，避免误判隐藏元素
• 找到可见目标图片后，先清除定时器再刷新页面，防止重复执行
• 检测间隔可灵活调整：间隔越短越灵敏，但会增加页面性能消耗

原代码无效的原因 #

1. 未定义 selector 变量，无法指向任何页面元素
2. 逻辑完全颠倒：需求是检测图片是否存在，你却在修改图片地址
3. 代码语法不完整，缺少闭合的 }，直接导致脚本无法运行

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