Question

故事

我从提供商处获取图像（书籍封面）。有时图像显示“无图像”或完全透明。我无法知道图像是否是真实的图书封面，没有其他数据可以使用。

解决方案

我尝试构建一个脚本，首先检查那些“无图像”图像的已知width和height，我将这些图像与字节大小一起放入数组中。如果height和width匹配，我发出GET请求获取blob.size，然后检查图像是否也与字节大小匹配。如果所有匹配我想添加一个“无书覆盖”类。

问题

似乎在经过多次请求之后，blob.file似乎变为null，就像在6-8场比赛之后一样。可能这个请求在某种程度上是asyncros，并且无法在syncros循环中处理它，但我不确定。但我不知道如何处理这个问题，我该如何解决它。可能我可以用一种我无法弄清楚的方式对其进行优化。无论如何，这是GET请求及其结果的错误。这就是我寻求帮助的原因。

代码

（我已经评论了它的理解）在Musa的评论之后编辑了代码。

      /* 
  Insert file size, height and width size of known "no book cover" images: 
  [bytes, height, width] is the order in the subarray 
  */
  var noBookCoverSizes = [[2724,100,80],[2727,100,80],[154,120,80]];

  jQuery(document).ready(function(){
    /* Just so we know we are on the right document*/
    if (jQuery('.portlet-queryRecordSearchResult').length && !jQuery('.portlet-catalogueDetail').length) {

      /* Each book cover*/
      jQuery('.arena-record-cover a img').each(function(){
        var img = jQuery(this),
            imgUrl = img.attr('src'),
            imgHeight = img[0].naturalHeight,
            imgWidth = img[0].naturalWidth,
            i;
        /*Run through each post in array*/
        for (i = 0; i < noBookCoverSizes.length; i++) {
          /* Check if width and height match */
          if(noBookCoverSizes[i][1] == imgHeight && noBookCoverSizes[i][2] == imgWidth) {
            var imgInt = i,
                xhr = new XMLHttpRequest();
            /* Run GET request */
            xhr.open('GET', imgUrl, true); 
            xhr.responseType = 'blob';
            xhr.onload = function() {
              var blob = this.response;
              /* Check if filesize match */
              if(blob.size == noBookCoverSizes[imgInt][0]) {
                /* Add class to parent*/
                img.parent().parent().parent().addClass('no-book-cover');
              }
            }
            xhr.send();
          }
        }
      });
    }
});

编辑：

进行测试

在https://arenagodemo.axiell.com/web/arena/search?p_p_id=searchResult_WAR_arenaportlets&p_p_lifecycle=1&p_p_state=normal&p_p_mode=view&p_r_p_687834046_facet_queries=&p_r_p_687834046_search_query=%C3%A5sna&p_r_p_687834046_search_type=solr&p_r_p_687834046_sort_advice=field%3DRelevance%26direction%3DDescending

的控制台中运行上面的代码

如果您运行代码：

var noBookCoverSizes = [[2724,100,80],[154,120,80]];

它可以工作，你可以看到透明和“无图像”封面是如何消失的。但是如果你用更多的数组帖子运行它们，它们就不会消失：

var noBookCoverSizes = [[2724,100,80],[2727,100,80],[154,120,80]];

如果我删除宽度/高度检查，它也会出错。所以我的结论是有些东西是asyncros，当有很多请求时，它会失败。所以我担心我的逻辑思维在这里是错误的。

Answer 1

您的一个问题是您使用循环中操作的变量在循环中定义了回调。在这种情况下，xhr（也是blob）中的变量值可能不是回调执行时的预期值。
由于回调将是xhr的成员，因此您可以使用this来引用它同时使blob本地化为回调，因为它不会在其他任何地方使用。

xhr.onload = function() {
  var blob = this.response;
  /* Check if filesize match */
  if(blob.size == noBookCoverSizes[imgInt][0]) {
    /* Add class to parent*/
    img.parent().parent().parent().addClass('no-book-cover');
  }
}

拉取img字节（大小）最终为null

1 个答案: