Question

这是我的HTML页面的当前代码：

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="refresh" content="3;URL='http://google.com'" /> 
</head>

<body>

<script>
var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
    image.src = this.src;   
};
downloadingImage.src = "http://example.com/pixel";
</script>

<script>
window.location = "http://google.com";
</script>

</body>

</html>

这段代码应该使用Javascript加载图片：

var image = document.images[0];
var downloadingImage = new Image();
downloadingImage.onload = function(){
    image.src = this.src;   
};
downloadingImage.src = "http://example.com/pixel";

这样做是为了验证用户是否启用了javascript。我们将访问者引导至特定广告客户，并且某些广告客户需要启用Javascript。正在加载的像素是我们可以跟踪来自第三方供应商的欺诈性流量，这些供应商尝试使用卷曲等内容发送数百万次机器人点击。

启用了javascript的用户数量略低于我的预期，而且我没有尝试辩论金额。但有人看到这个代码有什么问题吗？

我的理解是javascript按顺序加载，因此在重定向用户之前应该在浏览器中加载图像，对吗？您是否看到代码中有任何错误，我想这会导致它在某些浏览器中无法加载？

Answer 1

在按顺序执行脚本时，图像的加载是非阻塞的。因此，将image.src设置为某些内容并不会等待该图像加载后再继续。您需要确定何时要重定向，并将该代码放在图像的onload功能中。试试这个：

在<noscript></noscript>中包装您的刷新标记（仅对html5有效）

将代码修改为：

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Example</title>
        <meta name="robots" content="noindex, nofollow">
        <noscript>
            <meta http-equiv="refresh" content="3;URL='http://google.com'" /> 
        </noscript>
    </head>
    <body>
        <img src="//example.org/pixel1">
        <script>
            var image = document.images[0];
            var downloadingImage = new Image();
            downloadingImage.onload = function(){
                console.log('downloadImage loaded');
                image.onload = function(){
                    console.log('image loaded');
                    window.location = "http://google.com";
                }
                image.src = this.src;   
            };
            downloadingImage.src = "//example.com/pixel2";
        </script>
    </body>
</html>

使用Javascript加载图片？

1 个答案: