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函数，可用于检查是否加载了特定的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));
});

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

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

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

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

Answer 2

我对caperjs没有多少经验，在我的观察中我确定了以下几点

注意：

jQuery .load( handler )和.error( handler )均已从第1.8节弃用。
如果您使用的是jQuery 1.8+，那么将load和error个事件附加到img(tags)不会做任何事情。
jQuery Ajax模块还有一个名为$.load()的方法是$.get()的快捷方式。触发哪一个取决于传递的参数集。

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

开发人员尝试使用.load（）快捷方式解决的常见挑战是在图像（或图像集合）完全加载时执行函数。应该注意有几个已知的警告。这些是：

它不能始终如一地工作，也不能可靠地跨浏览器
如果图像src设置为与之前相同的src，则无法在WebKit中正确触发
它没有正确地冒泡DOM树
可以停止触发已存在于浏览器缓存中的图像

因此，如果你的jQuery版本为1.8以上，则以下版块不执行任何操作。

$(this).load(function(){
   pass_amount++;
   pass_img_src.push($(this).attr("src")); 
}).error(function(){
   fail_amount++; 
   fail_img_src.push($(this).attr("src"));
});

因此，此return [img_src, fail_amount, fail_img_src, pass_amount, pass_img_src];语句只会为img_src[提供img s作为长度的数组|数组中填充src个img s在页面中。和其他元素fail_amount, fail_img_src, pass_amount, pass_img_src将始终具有相同的默认值。

如果jQuery 1.8低于load和error事件，则jQuery的附件是有意义的（在您的情况下，这些事件在页面加载后附加，因此它们不会显示加载和错误回调的任何效果），但我们附加事件的时间很重要。我们应该在img标记之前附加这些标记或将事件放在标记级别（作为属性onload＆amp; onerror），并且函数处理程序脚本的定义应该保留在任何img标记之前或body的最开始或在head

有办法弄清楚有些人在这里：

使用开源插件，如（使用imagesLoaded）（https://github.com/desandro/imagesloaded）
可以使用ajax调用来查明img.src.url是否良好？
基于维度的检查，如下面function 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脚本中的错误？

2 个答案: