javascript - 加载前检查图片是否存在

Question

我使用了其他各种 Stack Overflow 问题中的示例，但由于某种原因，这对我不起作用。我创建了一个函数来获取缩略图并返回实际图像路径或默认(无缩略图)图像的路径。

同时使用 JQuery 方法和 Javascript Image 类，我收到关于控制台中缺少图像的 404 错误，并且找到的图像没有错误，但没有显示。谁能指出我做错了什么？

在 getThumbnail() 函数中，写入控制台时的“image_url”显示正确。当我在调用函数中并记录返回值时，它只是显示为“未定义”。

JQuery:

function getThumbnail(name)
{
    var image_url = "images/" + name + ".jpg";

    $.get(image_url)
        .done(function()
        {
            return image_url;
        })
        .fail(function()
        {
            return "images/default.jpg";
        })
}

Javascript:

function getThumbnail(name)
{
    var image = new Image();
    image.src = image_url;

    image.onload = function()
    {
        return image;
    }
    image.onerror = function()
    {
        return "images/default.jpg";
    }
}

调用函数:

            $.each( cycle, function( key, value )
            {
                var mapIndex = key;
                var mapValue = value;

                var brick = "<div class='brick small'><a class='delete' href='#'>&times;</a><img src='" + getThumbnail(value) + "' /><h2><span>" + value + "</span></h2></div>";
                $( ".gridly" ).append( brick );
            });

Answer 1

它不起作用的问题是 getThumbnail() 方法不会按照您想要的方式运行。

.onload 是一个异步调用，在这种情况下，getThumbnail(value) 将始终具有未定义的返回结果；

要实现您想要的目标，您可以执行以下操作:

<img src="/image/..." onerror="javascript:this.src='images/default.jpg'"/>