使用新的隨機刷新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是否有效。 輔助程序generageImage用於調用IsValidImageUrl直到找到有效的圖像為止。

Answer 2

您可以實現在js中創建每個圖像並監聽onload，onerror事件。 切記，創建1153張圖像最肯定會使瀏覽器向您吐痰。

function loadImage(i){
    var img = new Image();
    img.onload = function(){
        // image exists, do something with it, eg.
        // $('.container').append(this); or
        // $("#achieve a img").attr("src", this.src);
    };
    img.onerror = function(){
        // image does not exist, do something about it, eg.
        // load another one 
        // var anotherRandomNumber = Math.ceil(Math.random() * 1153));
        // loadImage(anotherRandomNumber);
    };
    img.src = "/engine/achigen/i/" + i + ".png";
}

var randomNumber = Math.ceil(Math.random() * 1153));
loadImage(randomNumber);