javascript - 你会如何循环浏览每个图像并检查它是否存在 casperjs 脚本中的错误？

Question

您将如何循环浏览给定页面上的每个图像并检查它是否已加载或出错？

以下内容在 phantomjs/casperjs 设置中似乎不起作用，但循环并获取 src 正在工作。

.load()

和

.error()

如果以上确实有效，有人可以展示在 casperjs 脚本中有效的正确用法吗？

我使用的代码类似于以下内容:

var call_to_page = this.evaluate(function() {
    var fail_amount = 0;
    var pass_amount = 0;
    var pass_img_src = [];
    var fail_img_src = [];
    var img_src = [];
        $("img").each(function(){
            $(this).load(function(){
               pass_amount++;
               pass_img_src.push($(this).attr("src")); 
            }).error(function(){
               fail_amount++; 
               fail_img_src.push($(this).attr("src"));
            });
            img_src.push($(this).attr("src"));
        });
    return [img_src, fail_amount, fail_img_src, pass_amount, pass_img_src];
});

任何关于为什么上面的代码对我不起作用的帮助都会很好。该页面已正确到达，我能够弄乱 dom，而不是 .load 或 .error。我认为这是由于图像已完成加载，所以我仍在寻找替代方案。

Answer 1

CasperJS 提供了 resourceExists可用于检查是否加载了特定资源的函数。资源被传递到一个函数中，因此可以提出自定义约束。

casper.then(function(){
    var fail_amount = 0;
    var pass_amount = 0;
    var pass_img_src = [];
    var fail_img_src = [];

    var elements = this.getElementsInfo("img");
    elements.forEach(function(img){
        if (img && img.attributes && casper.resourceExists(function(resource){
            return resource.url.match(img.attributes.src) && 
                   resource.status >= 200 && 
                   resource.status < 400;
        })) {
            pass_amount++;
            pass_img_src.push(img.attributes.src);
        } else {
            fail_amount++;
            fail_img_src.push(img.attributes.src);
        }
    });
    this.echo(JSON.stringify([fail_amount, fail_img_src, pass_amount, pass_img_src], undefined, 4));
});

这可以在页面加载后完成。因此无需预先在页面上下文中添加一些代码。

反过来，您的代码的问题可能是回调永远不会触发，因为图像已经加载或已经超时。所以没有新的信息。

如果您不确定计入哪种错误，您可以对所有可用类型或错误使用自定义资源检测。

var resources = []; // a resource contains at least 'url', 'status'
casper.on("resource.received", function(resource){
    if (resource.stage == "end") {
        if (resource.status < 200 || resource.status >= 400) {
            resource.errorCode = resource.status;
            resource.errorString = resource.statusText;
        }
        resources.push(resource);
    }
});
casper.on("resource.timeout", function(request){
    request.status = -1;
    resources.push(request);
});
casper.on("resource.error", function(resourceError){
    resourceError.status = -2;
    resources.push(resourceError);
});
function resourceExists(url){
    return resources.filter(function(res){
        return res.url.indexOf(url) !== -1;
    }).length > 0;
}
casper.start(url, function(){
    var elements = this.getElementsInfo("img");
    elements.forEach(function(img){
        if (img && img.attributes && resourceExists(img.attributes.src) && !resourceExists(img.attributes.src).errorCode) {
            // pass
        } else {
            // fail
        }
    }); 
});