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

Question

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

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

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

我的简单实现如下:

1. 用户打开网络浏览器

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

3. 浏览器从服务器请求横幅并为用户显示该图像(在这个阶段我会增加对该网站的印象)

Answer 1

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

因此，您想要提供缩略图，当单击缩略图链接时，您将 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>

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

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