如果资源可用且有效，则替换图像[重复]

Posted 2023-02-21

【中文标题】如果资源可用且有效，则替换图像[重复]

【英文标题】：Replace image if resource is available and valid [duplicate]

【发布时间】：2014-06-21 17:28:25

【问题描述】：

使用 javascript 我可以通过更改src 参数来替换图像，例如

document.getElementById('image-id').src = 'new-image.png';

如果我需要在并且只有新图像可用且有效时动态更改图像，我需要如何调整上述代码以仅在浏览器能够获取图像时执行替换？

换句话说，如果对new-image.png 的HTTP 请求以错误（403、404、500，...）结束，或者如果文件不是有效图像，我想保留原始图像，不要执行代码，否则浏览器不显示图像。

【问题讨论】：

也许你可以从这里开始：***.com/a/4236041/3315914

这似乎是您需要的：***.com/questions/1977871/…

@rpax - 文件的存在并不一定意味着该文件是有效的图像！

【参考方案1】：

您可以单独加载图像，如果成功则将其换入：

var img = document.createElement('img');
img.onload = function() 
    // It worked, either replace `image-id` with this new `img` element:
    var oldImg = document.getElementById("image-id");
    oldImg.parentNode.insertBefore(img, oldImg);
    oldImg.parentNode.removeChild(oldImg);
    img.id = "image-id";

    // ===OR===

    // Just set `image-id`'s `src` (it'll come from cache, presumably)
    document.getElementById("image-id").src = img.src;
    img = img.onload = null;
;
img.src = "new-image.png"; // Important to do this AFTER hooking `onload` above

【参考方案2】：

如中所说：How do I check if file exists in jQuery or JavaScript?

对该文件执行 ajax 请求（使用 jquery 完成）

$.ajax(
    url: 'http://www.example.com/somefile.ext',
    type: 'HEAD',
    error: function()
    
        // file does not exist
    ,
    success: function()
    
        // file exists
    
);

【讨论】：

文件存在并不一定意味着该文件是有效图像！

【参考方案3】：

试试这个：

使用 Javascript：

function imageExists(image_url)
 var http = new XMLHttpRequest();
 http.open('HEAD', image_url, false);
 http.send();
 return http.status != 404;

if(imageExists('new-image.png'))//when image exists
   document.getElementById('image-id').src = 'new-image.png';

使用 Jquery：

var image_url='new-image.png';
$.get(image_url)
.done(function()  
  document.getElementById('image-id').src = 'new-image.png';

).fail(function()  
    // Image doesn't exist

)

Reference

【讨论】：

对于图像，您实际上不需要发出任何 ajax 请求，只有在成功时才会触发 onload 事件

但是，如果您使用 ajax，您可以在不实际加载图像的情况下找到图像是否存在。考虑一个 10 mb 的图像文件，您不想加载它只是为了查找它是否存在。这取决于用例，如果您的目标是加载图像（如这个问题），那么 onload 会更好。

【参考方案4】：

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

【参考方案5】：

使用 jQuery，您可以使用：

function checkImage(img, src) 
    $("<img/>").one('load', function () 
        img.src = src;
    ).attr('src',src);

像这样使用它：

checkImage(document.getElementById('image-id'), 'new-image.png');

【参考方案6】：

常见解决方案：

$("<img/>")
  .load(function() 
    document.getElementById('image-id').src = 'new-image.png';
  )
 .attr('src', 'new-image.png');

---

干净的解决方案：

$("<img/>")
  .load(function() 
    document.getElementById('image-id').src = 'new-image.png';
    $(this).remove();
  )
  .error(function() 
    $(this).remove();
  )
  .attr('src', 'new-image.png');

---