javascript - 使用新的随机刷新 img src

Question

var rnd = Math.round((Math.random() * (1153 - 1) + 1));
while(!IsValidImageUrl("/engine/achigen/i/"+rnd+".png"))
    rnd = Math.round((Math.random() * (1153 - 1) + 1));
$("#achieve a img").attr("src", "/engine/achigen/i/"+rnd+".png");

我想在页面加载时将指定的图像替换为其他图像。我有图像 1.png..1153.png，但我需要检查图像 src 是否有效。

function IsValidImageUrl(url) {
$("#achieve a img", {
    src: url,
    error: return false,
    load: return true
});
}

我该怎么办？我的方法不对

Answer 1

您可以做的是创建一个基于递归/回调的函数，该函数会重复自身，直到找到有效的 URL。对于回调来说，使用 Promise 模式很方便。

考虑这个应该可以解决问题的示例:

function IsValidImageUrl(url, success, error) {
    return $.Deferred(function () {
        $("#achieve a img", {
            src: url,
            error: this.reject,
            load: this.resolve
        });
    }).promise();
}

function generateImage() {
    var rnd = Math.round((Math.random() * (1153 - 1) + 1));
    return IsValidImageUrl("/engine/achigen/i/" + rnd + ".png").then(function() {
        return "/engine/achigen/i/" + rnd + ".png";
    }, generateImage);
}

generateImage().then(function(url) {
    console.log('valid url', url);
});

在此示例中，IsValidImageUrl 返回一个 Promise 对象，该对象在 url 有效/无效时解析或拒绝。 Helper generageImage 用于调用 IsValidImageUrl 直到找到有效图像。