jQuery: Kiểm tra xem hình ảnh có tồn tại

Question

Tôi đang tải đường dẫn hình ảnh qua jQuery $ .ajax và trước khi hiển thị hình ảnh tôi muốn kiểm tra xem nó có tồn tại không. Tôi có thể sử dụng sự kiện tải hình ảnh/sẵn sàng hoặc một cái gì đó tương tự để xác định rằng đường dẫn tệp hợp lệ không?

Có .myimage thiết lập để display: none, tôi hy vọng sẽ làm điều gì đó như

$(".myimage").attr("src", imagePath); 
$(".myimage").load(function() { 
    $(this).show(); 
}); 

là bất cứ điều gì như thế có thể?

Answer 1

Vâng, bạn có thể ràng buộc .error() xử lý ...

như thế này,

$(".myimage").error(function(){ 
    $(this).hide(); 
}); 

tốt, bạn không sao đã có load-event

$(".myimage").load(function() { 
    $(this).show(); 
}); 

vấn đề với điều này là nếu javascript đã bị tắt hình ảnh sẽ không bao giờ hiển thị ...

Answer 2

Vì bạn đã thực hiện yêu cầu AJAX, tôi sẽ chuyển tải ứng dụng này sang ứng dụng phía máy chủ đang hỗ trợ AJAX của bạn. Việc kiểm tra xem tệp có tồn tại từ máy chủ hay không và bạn có thể đặt biến trong dữ liệu bạn gửi lại để chỉ định kết quả.

Answer 3

Một ol d chủ đề tôi biết nhưng tôi nghĩ rằng nó có thể được cải thiện. Tôi nhận thấy OP có vấn đề liên tục có thể do tải hình ảnh và kiểm tra lỗi đồng thời. Sẽ tốt hơn để tải hình ảnh đầu tiên và sau đó kiểm tra lỗi:

$(".myimage").attr("src", imagePath).error(function() { 
    // do something 
}); 

Answer 4

Hãy thử:

function urlExists(testUrl) { 
var http = jQuery.ajax({ 
    type:"HEAD", 
    url: testUrl, 
    async: false 
    }) 
    return http.status; 
     // this will return 200 on success, and 0 or negative value on error 
} 

sau đó sử dụng

if(urlExists('urlToImgOrAnything') == 200) { 
    // success 
} 
else { 
    // error 
} 

Answer 5

Câu hỏi này là một cặp vợ chồng tuổi, nhưng đây là một ví dụ sử dụng tốt hơn cho trình xử lý lỗi cho bất kỳ ai nhìn vào điều này.

$("img") 
    .error(function(){ 
    $(this).hide(); 
    }) 
    .attr("src", "image.png"); 

Bạn cần đính kèm trình xử lý lỗi trước khi thử tải hình ảnh để bắt sự kiện.

Nguồn: http://api.jquery.com/error/

Answer 6

Đây là những gì tôi đã làm của tôi:

$.get('url/image', function(res){ 
    //Sometimes has a redirect to not found url 
    //Or just detect first the content result and get the a keyword for 'indexof' 
    if (res.indexOf('DOCTYPE') !== -1) { 
     //not exists 
    } else { 
     //exists 
    } 
});