当锚点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更改为真实图像并显示它。