使用新随机数刷新img src

Refresh img src with new random

本文关键字：img src 刷新 随机数      更新时间：2023-09-26
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
});
}

我该怎么做？我的方式是错误的

您可以创建一个基于递归/回调的函数，该函数将重复自身，直到找到有效的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，直到找到有效的映像为止。

您可以通过在js中创建每个图像并侦听onload、oneror事件来实现这一点。请记住，创建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);
相关文章：