1

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

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

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

我天真的实现如下：

  1. 用户打开网络浏览器

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

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

4

1 回答 1

2

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

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

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

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

于 2019-07-20T10:53:10.763 回答