Question

如果这是一个愚蠢的问题，请道歉，但我对JavaScript不太好，我试图创建一个页面，从puu.sh获取一个随机图像并将其显示在页面上，有点受this启发。

我知道它可能不是最优雅的解决方案，但我有一个函数可以生成一个5个字符的随机字符串，然后将其添加到puu.sh链接并显示图像。

如果存在具有该字符串的图像，则此方法有效，但10个图像中的9次不存在。我正在寻找一种方法来检查图像是否存在，然后如果没有，返回到该函数并创建另一个字符串并加载另一个图像直到显示图像，有没有办法做到这一点？

这里是JSFiddle。

<body>
    <img id="image" src=""/>
    <script>
        function generator(num)
            {
                var text = "";
                var charset = "abcdefghijklmnopqrstuvwxyz0123456789";

                for( var i=0; i < num; i++ )
                    text += charset.charAt(Math.floor(Math.random() * charset.length));

                return text;
            }

            document.getElementById('image').setAttribute('src', "http://www.puu.sh/" +generator(5) + ".jpg");

    </script>
</body>

感谢。

Answer 1

您可以使用图片的onerror处理程序。

首先在初始化代码中设置处理程序。

var img = document.getElementById('image');

img.onerror = function() {
    console.log('Image ' + this.src + ' didn\'t load');
}

然后在您的间隔中，您只需像往常一样生成并设置网址。如果发生错误，将调用上述函数，您可以采取必要的步骤。

img.src = "http://www.puu.sh/" +generator(5) + ".jpg";

除此之外我同意DanMan的评论 - 与其他人的服务器这样做可能不是一个好主意......

Answer 2

来自@Ken Fyrstenberg的解决方案很优雅，但您也可以

 <img id="image" src="" onerror="YouErrorFunction(this)"/>

检查图像是否显示，如果没有调用功能？

2 个答案: