想象一下,我们在网页中有两个大小不同的相似图像,其中一个可能被CSS @media规则隐藏了。
然后,我需要一种适当的方法或Javascript事件来检测至少一个图像已被加载并被浏览器客户端实际看到。
我的最终目标是检测网站上的欺诈印象。因此,我需要确保至少看到了其中一张图片。
我的天真的实现如下:
用户打开网络浏览器
用户访问包含这些图像的网站(横幅,例如广告)
浏览器从服务器请求横幅,并为用户显示该图像(在此阶段,我为该网站增加展示次数)
最佳答案
这就是缩略图的本质和实用性。直接确保看到图像非常困难-用户可能会在不看图像的情况下瞬间滚动浏览您的页面,或者他们可能实际上将图像滚动到视图中,但将注意力转移到页面上的其他位置(例如仪表板),甚至将注意力转移到屏幕之外。
因此,您要提供缩略图,然后单击缩略图链接,然后将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>
现在,您可以观察到在用户可见之前,将首先加载完整图像。
例如,当用户仅看到广告展示位置,但是当用户单击它并成功加载广告的完整视图时,所有者不会从页面上的广告收入中获得收入。