使用 Javascript 从 imgur 中提取随机图像

Question

我在其他一些 StackOverflow 答案的帮助下创建了一个函数 - 单击按钮时，它会使用 5 个字母的字符串从 imgur 生成一个随机图像并将其添加到 url。这是我的代码：http://codepen.io/kaisle/pen/ojbwQm

function randomString() {
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghiklmnopqrstuvwxyz';
    var stringlength = 5;
    var text = '';
    for (var i = 0; i < stringlength; i++) {
      var rnum = Math.floor(Math.random() * chars.length);
      text += chars.substring(rnum,rnum+1);
    }
    document.getElementById('output').innerHTML = text;
    var source = 'http://i.imgur.com/' + text + '.jpg';
    $('.stuff img').attr('src', source);
    var newimagewidth = $('.stuff img').width;
    avoidBrokenImages();
  }

这很成功，因为我得到了很多“已删除”的图像，因为它从 imgur 中提取已删除的图片，或者从未包含随机 5 字母字符串的图像。为了避免这种情况，我试图创建一种方法来检测这个 161px 宽的图像 (http://i.imgur.com/removed.png)，然后重新运行该函数，直到它得到一个不是 161px 宽的图像。我在上面的 Codepen 中尝试了这个，方法是在我的图像生成器函数的末尾运行以下函数：

function avoidBrokenImages(){
  var newimagewidth = $('.stuff img').width;
  if ($('.stuff img').width() == 161) {
     randomString();
    } else {
      return false;
    }
}

这个“avoidBrokenImages”功能似乎不起作用，因为我仍然经常收到“已删除”的图像。

有什么建议吗？我觉得这很容易我想念。

Answer 1

您正在尝试在加载之前读取图像宽度。你应该改变

$('.stuff img').attr('src', source);
var newimagewidth = $('.stuff img').width;
avoidBrokenImages();

到

$('.stuff img').attr('src', source).on('load', avoidBrokenImages);

修改原文：http://codepen.io/anon/pen/qObPrq

稍微清理一下代码：http://codepen.io/anon/pen/KdVXWY