使用javascript检查图像是否存在

Question

可能重复:
使用jquery检查图像是否与给定URL一起
存在如果文件存在则更改图像源

我将图像路径的值从文本框扔到boxvalue,并想要使用javascript验证图像是否存在.

 var boxvalue = $('#UrlQueueBox').val();

我浏览了stackoverflow并找到了下面的图像宽度/高度,但不想使用它.

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

我如何验证它是否真的是图像路径中的图像？

Answer 1

// The "callback" argument is called with either true or false
// depending on whether the image at "url" exists or not.
function imageExists(url, callback) {
  var img = new Image();
  img.onload = function() { callback(true); };
  img.onerror = function() { callback(false); };
  img.src = url;
}

// Sample usage
var imageUrl = 'http://www.google.com/images/srpr/nav_logo14.png';
imageExists(imageUrl, function(exists) {
  console.log('RESULT: url=' + imageUrl + ', exists=' + exists);
});

Answer 2

您可以创建一个函数并检查complete属性.

function ImageExists(selector) {
    var imageFound = $(selector); 

    if (!imageFound.get(0).complete) {
        return false;
    }
    else if (imageFound.height() === 0) {
        return false;
    }

    return true;
}

并称之为这个功能

 var exists = ImageExists('#UrlQueueBox');

与url相同的函数而不是选择器作为参数(您的情况):

function imageExists(url){

    var image = new Image();

    image.src = url;

    if (!image.complete) {
        return false;
    }
    else if (image.height === 0) {
        return false;
    }

    return true;
}