檢查不加載它

我目前使用下面的腳本在懸停功能：檢查不加載它

function UrlExists(url) { 
    var http = new XMLHttpRequest(); 
    http.open('HEAD', url, false); 
    http.send(); 
    return http.status!=404; 
}

它加載每個圖像各一後，造成對整個網站放緩（甚至崩潰）。

有沒有辦法來檢查，如果圖像存在，雖然防止加載它（完全）使用JavaScript？

非常感謝！

來源

2012-12-18 James Cazzetta

是， SE向服務器上的腳本請求一個腳本，然後測試映像的存在。 –

由於JavaScript（因此jQuery）是客戶端，並且圖像在加載之前駐留在服務器端，因此無法檢查圖像是否存在，而無需使用Ajax或服務器端腳本來確保圖像存在。

來源

2012-12-18 16:20:46

所以使用PHP的函數* file_exists *在Ajax請求應該這樣做？（我知道這是有效的，但我想知道它是否可以在沒有Ajax的情況下完成） –

是的，然後您可以在客戶端返回任何需要的消息來做出適當的反應。 –

有沒有方式確定使用JavaScript或jQuery的圖像是否存在不加載它。

解決方法：

的唯一方法，以檢查是否在服務器端存在的圖像是嘗試將圖像加載到隱藏div或東西，檢查圖像是否有或沒有，然後顯示它。

或者您可以使用您選擇的一些服務器端語言（如php，asp，jsp，python等）並將請求發送到服務器端語言的圖像（最好使用AJAX）並讓服務器端腳本檢查圖像是否存在，如果存在則發回圖像，如果不存在則發送錯誤代碼。

來源

2012-12-18 16:39:45

這裏是你如何檢查是否有圖像存在：

function checkImage(src) { 
    var img = new Image(); 
    img.onload = function() { 
    // code to set the src on success 
    }; 
    img.onerror = function() { 
// doesn't exist or error loading 
}; 

img.src = src; // fires off loading of image 
}

這裏的工作實現http://jsfiddle.net/jeeah/

來源

2013-05-02 06:44:22

問題的關鍵是「沒有加載」。該解決方案加載圖像。 – Billbad

我的解決辦法：

function imageExists(url) { 
    return new Promise((resolve, reject) => { 
     const img = new Image(url); 
     img.onerror = reject; 
     img.onload = resolve; 
     const timer = setInterval(() => { 
      if (img.naturalWidth && img.naturalHeight) { 
       img.src = ''; /* stop loading */ 
       clearInterval(timer); 
       resolve(); 
      } 
     }, 10); 
     img.src = url; 
    }); 
}

例子：

imageExists(url) 
    .then(() => console.log("Image exists.")) 
    .catch(() => console.log("Image not exists."));

來源

2018-02-27 20:36:02 wiktor

檢查不加載它

回答

相關問題