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 map

轮询文件的存在

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更改为真实图像，它将显示它。

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

3 个答案: