Javascript 如何循环浏览每个图像并检查casperjs脚本中的错误？

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

以下内容在phantomjs/casperjs设置中似乎不起作用，但循环并获取src是有效的

.load()

及

如果上述方法确实有效，那么有没有人能展示一个在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。我认为这是由于图像加载的缘故，所以我仍在寻找替代方案。

我对CaperJ没有太多经验，根据我的观察，我确定了以下几点

注意：

• jQuery和这两个版本都是从verson 1.8中弃用的

• 如果您使用的是

  jQuery 1.8+

  ，那么将

  load

  和

  error

  事件附加到

  img（标记）

  不会起任何作用

• jQuery Ajax模块还有一个名为

  $的方法。load（）

  是

  $.get（）

  的快捷形式。触发哪一个取决于传递的参数集

以下是加载事件与jQuery文档中的图像一起使用时的注意事项

开发人员使用.load（）快捷方式试图解决的一个常见问题是，在图像（或图像集合）完全加载后执行函数。有几个已知的注意事项需要注意。这些是：

• 它在跨浏览器中无法稳定工作，也不可靠
• 如果图像src设置为与以前相同的src，则在WebKit中无法正确触发
• 它不能正确地在DOM树上冒泡
• 对于已经存在于浏览器缓存中的图像，可以停止激发

因此，如果您使用的是jQuery的1.8+版本，那么下面的代码块什么也不做

因此，此

返回[img_src，fail_amount，fail_img_src，pass_amount，pass_img_src]

语句将只给我们提供

img\U src[

，其中

img

s的数量作为长度]数组，该数组在第页中填充

src

s of

img

s。其他元素

fail\u amount、fail\u img\u src、pass\u amount、pass\u img\u src

将始终具有相同的默认值

---

在下面的

jQuery 1.8

中

load

和

error

事件中，使用jQuery附加事件是有意义的（在您的案例中，这些事件是在加载到页面上之后附加的，因此它们不会对load和error回调显示任何影响），但附加事件的时间很重要。我们应该将这些附加在

img

标记之前，或者将事件放在标记级别（作为属性onload&onerror），函数处理程序脚本的定义应该放在任何img标记之前，或者放在

body

或

head

以下是一些解决方法：

• 使用开源插件，如（使用imagesLoaded]（）
• 可以使用ajax调用来确定img.src.url是否正确
• 基于维度的检查，如下所示

  函数IsImageRendered

下面我有一个，但它的旧的不确定浏览器支持在这个时候。我建议去上面的插件，如果你可以使用它

var call_to_page = this.evaluate(function () {
    function isImageRendered(img) {
        // with 'naturalWidth' and 'naturalHeight' to get true size of the image. 
        // before we tried width>0 && height>0
        if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
            return false;
        }

        //good 
        return true;
    }
    var pass_img_src = [];
    var fail_img_src = [];
    var img_src = [];
    $("img").each(function () {
        var $img = $(this), $srcUrl = $img.attr("src");
        img_src.push($srcUrl);
        if (!$srcUrl)
            fail_img_src.push($srcUrl);
        else {
            if (isImageRendered($img.get(0))) {
                pass_img_src.push($srcUrl);
            }
            else {
                fail_img_src.push($srcUrl);
            }
        }
    });
    var fail_count = fail_img_src.length,
        pass_count = pass_img_src.length;
    return [img_src, fail_count, fail_img_src, pass_count, pass_img_src];
});

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

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));
});

casper.then（函数（）{
var失效金额=0；
var通行证金额=0；
var pass_img_src=[]；
var fail_img_src=[]；
var elements=this.getElementsInfo（“img”）；
元素。forEach（函数（img）{
如果（img&&img.attributes&&casper.resource）存在（函数（资源）{
返回resource.url.match（img.attributes.src）和
resource.status>=200&&
资源状态<400；
})) {
通过量++；
pass_img_src.push（img.attributes.src）；
}否则{
失败金额++；
失败\u img\u src.push（img.attributes.src）；
}
});
this.echo（JSON.stringify（[fail\u amount，fail\u img\u src，pass\u amount，pass\u img\u src]，未定义，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
        }
    }); 
});

var resources=[]；//资源至少包含“url”、“status”
casper.on（“resource.received”，函数（resource）{
如果（resource.stage==“end”）{
if（resource.status<200 | | resource.status>=400）{
resource.errorCode=resource.status；
resource.errorString=resource.statusText；
}
资源。推送（资源）；
}
});
casper.on（“resource.timeout”，函数（请求）{
request.status=-1；
资源。推送（请求）；
});
casper.on（“resource.error”，函数（resourceError）{
resourceError.status=-2；
资源推送（resourceError）；
});
函数resourceExists（url）{
返回资源。过滤器（函数（res）{
返回res.url.indexOf（url）！=-1；
}).长度>0；
}
casper.start（url，函数（）{
var elements=this.getElementsInfo（“img”）；
元素。forEach（函数（img）{
if（img&&img.attributes&&resourceExists（img.attributes.src）和&！resourceExists（img.attributes.src）.errorCode）{
//通过
}否则{
//失败
}
}); 
});

回答得很好。我喜欢你在没有进行评估的情况下所做的。当你说检查它是否已加载时，是不是

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
        }
    }); 
});