javascript - 当锚点 HREF 源不存在时隐藏图像

Question

我想大约每 5 秒轮询一次锚点的 href 源，以查看该地址处的文件是否存在。当它存在时，在锚点中显示图像。换句话说，除非文件存在，否则链接基本上不存在。

我猜我必须使用 http HEAD 请求进行轮询以确定文件是否存在，然后适当地切换图像。一旦确定文件存在，我就可以停止轮询并保持图像可见。

有没有更好的方法来做到这一点，任何人都可以建议一些可以处理此功能的脚本吗？

Answer 1

// 注意，这段代码假定使用的是 jQuery

var interval = setInterval(function(){
   var _el=$('#hrefId');
   var href = _el.attr('href');
   if(href == null || typeof href == 'undefined' || href == '')
      return;

   ajax call to href(in case on ur server(!) )

   // on success
   _el.attr('href','TheLink');
   $('img', _el).show(); // show image
}, 5);

Answer 2

如果您的服务器配置为这样做，您可以使用：

http://api.jquery.com/jQuery.ajax/

使用 statusCode 映射轮询文件是否存在

function checkFile() {
    $.ajax({
        statusCode: {
            404: function() {
                //file does not yet exist
                setTimeout(checkFile, 5000);
            }
            200: function() {
                //file exists.
                showImage();
            }
        }
    });
}

不过，您可能希望捕获更多的边缘情况（例如，错误回调）。

Answer 3

您还可以使用套接字库，以便服务器可以在图像准备好时推送通知。socket.io 在这里似乎是一个不错的选择。

另一种方法是侦听error图像上的事件，然后等待 x 毫秒，然后再尝试再次加载它。这很容易实现，因为每次定义 src 属性时，浏览器都会添加新的侦听器。

它与您的元描述基本相同，但您不需要使用 ajax。您还可以从其他域加载图像（ajax 具有跨站点策略）：

var img = new Image(),
    src = '/path/to/image.jpg';
img.onload = function() {
    console.log('loaded', img);
};
img.onerror = function() {
    window.setTimeout(function() {
        img.src = src;
    },500);
};
img.src = src;​

这是一个概念证明：http: //jsfiddle.net/L2L3U/。该程序将尝试加载 404 图像三秒钟，然后我将 src 更改为真实图像并显示它。