Có thể kiểm tra xem một tệp có trả về lỗi 404 nếu nó nằm trên một máy chủ khác với javascript hoặc jQuery không?

Question

Có thể kiểm tra xem một tệp có trả lại lỗi 404 nếu nó trên một máy chủ khác sử dụng jQuery/javascript không?

Tôi đang sử dụng youtube api để có ảnh chụp màn hình HD cho video tôi đang nhúng, nhưng JSON mà nó trả lại không cho biết liệu có ảnh chụp màn hình HD cho video không.

url cho ảnh chụp màn hình thường là, http://img.youtube.com/vi/ + video.ID + /maxresdefault.jpg

nhưng khi nó không tồn tại, tôi nhận xấu xí-res thấp POS này màu xám: http://img.youtube.com/vi/MAyTES9gDAU/maxresdefault.jpg

Vì vậy, về cơ bản, tôi muốn kiểm tra xem ảnh chụp màn hình có tồn tại không và nếu không, hãy áp dụng display: none cho div giữ nó.

Answer 1

Tạo phần tử <img> trỏ đến hình ảnh đó, sau đó xử lý sự kiện onerror và ẩn sự kiện đó.

Answer 2

Bạn có thể tạo đối tượng Image và xử lý onload và onerror. Nó sẽ chỉ làm việc cho hình ảnh, tâm trí.

function checkExists(imageUrl, callback) { 
    var img = new Image(); 

    img.onerror = function() { 
     callback(false); 
    }; 

    img.onload = function() { 
     callback(true); 
    }; 

    img.src = imageUrl; 
} 

Sử dụng nó như thế này: câu trả lời

checkExists(yourVideoUrl, function(exists) { 
    if(!exists) { 
     // Hide the image 
    } 
}); 

Here's a demo.

Answer 3

minitech của việc cho kiểm tra của 404, tuy nhiên ...

Đối với trường hợp YouTube, họ phải xử lý riêng của họ thay vì cho bạn 404, chúng cung cấp cho bạn hình ảnh lỗi "đẹp".

YouTube có API sẽ kiểm tra xem ID video có hợp lệ hay không. Hãy xem bài đăng này cho bạn biết cách kiểm tra xem id video YouTube có tồn tại hay không hợp lệ: https://groups.google.com/forum/?fromgroups=#!topic/youtube-api-gdata/oAztQ3f1tcM

Khi bạn xác nhận rằng video tồn tại, bạn có thể thử tải lên hình ảnh. Nếu video không tồn tại, bạn có thể xử lý trường hợp đó theo bất kỳ cách nào bạn muốn.

Answer 4

Điều này đã hiệu quả đối với tôi (tôi có trong bản chính).

checkImages = -> 
    $("img").each -> 
    $(this).error -> 
     $(this).attr("src", "../default/image.jpg") 

$(document).on('page:load', checkImages) 

Tôi đoán tương đương với javascript là một cái gì đó giống như

function checkImages() { 
    $("img").each(function() { 
    $(this).error(function() { 
     $(this).attr("src", "../default/image.jpg"); 
    }); 
    }); 
}; 

$(document).on("page:load", checkImages); 

Answer 5

Bạn cần phải bổ sung thêm kiểm tra đối với một mặc định hình ảnh màu xám:

function checkExists(imageUrl, callback) { 
    var img = new Image(); 

    img.onerror = function() { 
     callback(false); 
    }; 

    img.onload = function() { 
     //check for a default (grey) image 
     if (this.width == 120) { 
      callback(false); 
     }else { 
      callback(true); 
     } 
    }; 

    img.src = imageUrl; 
} 

Demo