Question

我试图使用Casperjs抓住这个page。我的代码的主要功能很好，但内容是动态加载的，我无法弄清楚如何触发它。

这就是我现在正在做的事情：

casper.waitFor(function() {

    this.scrollToBottom();

    var count = this.evaluate(function() {
        var match = document.querySelectorAll('.loading-msg');
        return match.length;
    });

    if (count <= 1) {
        return true;
    }
    else {
        return false
    };

}, function() { // do stuff });

等待超时即将到期，即使我已将其增加到20秒，并且新内容永远不会被加载。我已尝试将此功能改编为我的案例：

function tryAndScroll(casper) {
  casper.waitFor(function() {
    this.page.scrollPosition = { top: this.page.scrollPosition["top"] + 4000, left: 0 };
    return true;
  }, function() {
    var info = this.getElementInfo('p[loading-spinner="!loading"]');
    if (info["visible"] == true) {
      this.waitWhileVisible('p[loading-spinner="!loading"]', function () {
        this.emit('results.loaded');
      }, function () {
        this.echo('next results not loaded');
      }, 5000);
    }
  }, function() {
    this.echo("Scrolling failed. Sorry.").exit();
  }, 500);
}

但我无法弄明白，我甚至不确定它与此相关。有什么想法吗？

Answer 1

我看了一下页面。它有这样一种行为，当你跳到最后时，它不会加载中间图像。

加载页面时，前几行完全加载，而另外一些行未完全加载（图像缺失由'.loading-msg'元素表示）。当你用this.scrollToBottom();跳到最后时，没有连续的滚动。它跳到最后，页面JavaScript没有检测到中间图像在视口中，但是很简单。页面继续加载下一行，但不会删除跳过的行的缺失图像。

你必须减少两个片段中跳跃的距离。

第一个可以像这样改变：

var pos = 0, 
    height = casper.page.viewportSize.height;
casper.waitFor(function() {
    this.scrollTo(0, pos * height);
    return !this.exists('.loading-msg');
}, function() { // do stuff }, 20000);

第二个可能会改变

this.page.scrollPosition = { top: this.page.scrollPosition["top"] + 4000, left: 0 };

到

var height = casper.page.viewportSize.height;
this.page.scrollPosition = { top: this.page.scrollPosition.top + height, left: 0 };

Casperjs刮动动态内容

1 个答案: