Question

想象一下，我们在网页中有两个大小不同的相似图像，其中一个可能会被CSS @media规则隐藏。

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

我的最终目标是检测网站上的欺诈印象。因此，我需要确保至少看到了其中一张图像。

我的天真实现如下：

用户打开网络浏览器
用户访问的网站包含这些图像（横幅，例如广告）
浏览器从服务器请求横幅，并为用户显示该图像（在此阶段，我为该网站增加展示次数）

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>

现在，您可以看到在下一页上完整的图像在用户可见之前首先被加载。

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

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

1 个答案: