當錨點HREF源不存在時隱藏圖像

Question

我想每5秒輪詢一次錨點的href源，以查看該地址處的文件是否存在。當它存在時，在錨點中顯示圖像。換句話說，除非文件存在，否則鏈接基本上不存在。

我想我將不得不輪詢使用http HEAD請求來確定文件是否存在，然後適當切換圖像。一旦確定文件存在，我可以停止輪詢並使圖像可見。

有沒有更好的方法來做到這一點，任何人都可以建議一些腳本來處理這個功能？

Answer 1

如果您的服務器被配置爲這樣做，你可以使用：

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(); 
      } 
     } 
    }); 
} 

您可能會喜歡t來捕獲更多邊緣情況，但是（例如，錯誤回調）。

Answer 2

//注意，這段代碼假定要使用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 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更改爲真實圖像並顯示它。