Question

我在其他一些StackOverflow答案的帮助下创建了一个函数 - 当单击该按钮时，它会通过使用5个字母的字符串并将其添加到URL来从imgur生成随机图像。这是我的代码：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();
  }

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

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

这＆＃34; avoidBrokenImages＆＃34;功能似乎不起作用，因为我仍然得到＆＃34;删除＆＃34;想象很多。

有什么建议吗？我觉得这很容易让我失踪。

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

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

1 个答案: