如何确保浏览器用户看到了 img 标签？

Question

假设我们在一个网页中有两张大小不同的相似图片，其中一张可能被 CSS @media 规则隐藏。

然后我需要一种适当的方式或 Javascript 事件来检测浏览器客户端已加载并实际看到的至少一个图像。

我的最终目标是检测网站中的欺诈印象。所以我需要确保至少有一张图片被实际看到。

我的幼稚实现如下：

1. 用户打开网络浏览器

2. 用户访问包含这些图像（横幅，例如广告）的网站

3. 浏览器从服务器请求横幅并为用户显示该图像（在此阶段我增加该网站的印象）

Answer 1

这就是缩略图的精髓和用处。直接确保图像被看到是非常困难的——用户可能只是在一瞬间滚动浏览你的页面而不看图像，或者他们可能实际上将你的图像滚动到视图中，但他们的注意力集中在页面上的其他东西上（像仪表板），甚至让他们的注意力从屏幕上移开。

因此，您想要提供缩略图，并且当单击缩略图链接时，您将onload 侦听器附加到下一页的完整图像。这就是您知道人们对您的图像感兴趣并实际查看它的方式。这段代码说明了这一点：

<!-- The Full image page --> 
<div id='imageContainer'></div>
<script>
    let imgObj = new Image();
    imgObj.src = 'https://myFullImagelink.com/imageSample.png';
    imgObj.onload = function() {
        document.getElementById("imageContainer").appendChild(imgObj);
    }
</script>

现在您可以观察到，在下一页上，完整图像首先加载，然后才对用户可见。

例如，当用户只是看到广告展示位置，而是当用户点击它并成功加载广告的完整视图时，所有者不会从页面上的广告中获得收入。