加载前检查图像是否存在答案

【问题标题】：Check if image exists before loading加载前检查图像是否存在
【发布时间】：2015-07-11 13:52:41
【问题描述】：

我使用了来自其他各种 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 );
            });

【问题讨论】：

标签： javascript jquery image preload image-preloader

【解决方案1】：

这不起作用，因为return 在onerror 和onload 函数中，并且因为请求是异步的，所以函数不会等到reuest 完成。

您可以使用回调实现此目的。

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

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

    var image = new Image();

    image.onload = function()
    {
        c(image_url, name);
    }
    image.onerror = function()
    {
        c("images/default.jpg", name);
    }

    image.src = image_url;
}

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

    getThumbnail(value, callback);
});

【讨论】：

我接受了另一个答案，因为它更简单，但这很有意义，谢谢你的替代方法。

【解决方案2】：

它不起作用的问题是 getThumbnail() 方法不会像你想要的那样运行。

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

要完成您想要的，您可以执行以下操作：

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

【讨论】：

这很好用，我不知道那些是异步调用，但现在这很有意义。非常感谢！
onerror 在图像无法加载时执行，而不是在 OP 要求的加载之前执行
完美！谢谢。