如何确保浏览器用户看到 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>

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

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