jquery 加载前检查图像是否存在

daupos2t 于 2023-11-17 发布在 jQuery

关注(0)|答案(4)|浏览(137)

我已经使用了各种其他Stack Overflow问题的例子，但由于某种原因，这对我不起作用。我创建了一个函数来获取缩略图，并返回实际图像路径或默认（无缩略图）图像的路径。
使用JQuery方法以及JavaScript Image类，我得到404错误关于丢失的图像在控制台和找到的图像不错误，但不显示。有人能指出我做错了什么吗？
在getThumbnail（）函数中，“image_url”在写入控制台时显示正确。当我在调用函数中并记录返回值时，它只是显示为“undefined”。
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 );
            });

型

jquery

来源：https://stackoverflow.com/questions/29991834/check-if-image-exists-before-loading

4条答案

按热度按时间

46qrfjad1#

它不工作的问题是getThumbnail（）方法不会像你想要的那样工作。
onload是一个JavaScript调用，在这种情况下，getThumbnail（value）将始终返回未定义的结果;
为了实现你想要的，你可以做这样的事情：

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

字符串

赞(0）回复(0）举报 2023-11-17

rbpvctlc2#

这不工作，因为return在onerror和onload函数中，并且因为请求是codec，所以函数不会等待直到reuest完成。
你可以使用callback来实现。

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);
});

字符串

赞(0）回复(0）举报 2023-11-17

dtcbnfnu3#

<img src="/image/..." onerror="javascript:this.src='images/default.jpg'"/> will work bustyou HAVE TO make sure THAT image exists. Otherwise you will go into an endless loop of the onerror trying to find an image.

字符串

赞(0）回复(0）举报 2023-11-17

cbeh67ev4#

使用标准的xmlhttprequest，简单

var x = new XMLHttpRequest(); x.open("get", "your_url.com/image.ext or /image.png or image.jpg", true);x.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) {alert('exist');}else{alert('does not exist'};}; x.send();

字符串
或者简单的方法

var i = new Image(); i.onload = alert('exist'); i.onerror = alert('npt exist'); i.src = imageSrc;

型

赞(0）回复(0）举报 2023-11-17

我来回答

jquery 加载前检查图像是否存在

4条答案

相关问题

热门标签

最新问答