Cách xác thực nội dung trong URL (Javascript)

Tôi có URL trong nguồn cấp dữ liệu JSON n mỗi URL chứa một hình ảnh. Tôi muốn xác nhận những URL có hình ảnh hay không (NULL). Cách xác thực điều này bằng javascript. vì tôi là người mới bắt đầu, tôi không biết, làm cách nào để xác thực điều này. nhờCách xác thực nội dung trong URL (Javascript)

 JSON feed with image n NULL 
     { 

     previewImage:"http://123.201.137.238:6060/feed/videoplay/Jackie.png", 

     }, 
     { 

     previewImage:"http://www.snovabits.net/feed/ImageMI/WarCraft.jpg", 

     },

Nguồn

2011-12-08 FreshBits

Bạn có thể gửi mẫu json, tốt nhất là với các liên kết truy cập cho người khác. Ngoài ra, hãy đăng mã mà bạn đã viết/thử cho đến thời điểm này. –

Bạn không thể làm điều này với JavaScript một mình trừ khi tất cả các hình ảnh được lưu trữ trên cùng một miền với JavaScript của bạn. Đây có phải là trường hợp không? –

Có cách nào khác không? để làm điều này – FreshBits

Câu hỏi thú vị!

Hãy thử thêm hình ảnh vào div (sử dụng jQuery, div có thể bị ẩn bằng cách sử dụng display: none;).
Sau đó kiểm tra các thuộc tính của hình ảnh thường xuyên (sử dụng vòng lặp setInterval) cho dù chúng cho biết tải thành công hay không. Xác định một số thời gian chờ mà sau đó setInterval sẽ tự sát.

tài sản này hoạt động để thử nghiệm tải img thành công trong Chrome và Firefox:

naturalHeight != 0

tài sản này hoạt động để thử nghiệm tải img thành công trong việc IE7,8,9:

fileCreatedDate != ''

thử nghiệm cả hai để làm nó hoạt động trong tất cả các trình duyệt chính.

Đây là một câu hỏi để xem cách các đạo cụ thay đổi theo các bước 10ms trong quá trình tải. Hãy thử nó trong các trình duyệt khác nhau !:
http://jsfiddle.net/xGmdP/

Trong Chrome và FF bạn thậm chí có thể thay thế cho thời gian chờ cho vòng lặp setInterval bằng cách kiểm tra hoàn thành tài sản của tất cả hình ảnh. Nhưng tiếc là điều này không làm việc trong IE (hoàn thành luôn luôn giả trong IE cho hình ảnh không thể tải được).

Cuối cùng đây là mã hoàn chỉnh của fiddle:

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/JavaScript"></script> 
    <script type="text/JavaScript"> 
    $(function(){ 
     $('#images').prepend('<img id="img1" src="http://123.201.137.238:6060/feed/videoplay/Jackie.png">') 
     $('#images').prepend('<img id="img2" src="http://www.snovabits.net/feed/ImageMI/WarCraft.jpg">') 
     setInterval(test, 10); 
    }) 

    function test(){ 
     var props=['naturalHeight', 'complete', 'fileCreatedDate', 'clientHeight', 'offsetHeight', 'nameProp', 'sourceIndex']; 
     for(i in props){ 
     var pr = props[i]; 
     $('#testresults').append('1:'+pr+' = ' + $('#img1').prop(pr)+'<br>'); 
     $('#testresults').append('2:'+pr+' = ' + $('#img2').prop(pr)+'<br>'); 
     } 
     $('#testresults').append('---<br>'); 
    } 
    </script> 
</head> 
<body> 
    <div id="images"><div> 
    <div id="testresults"></div> 
</body> 
</html>

Nguồn

2011-12-08 10:06:44 Jpsy

WOw! Tuyệt quá! Tôi chính xác Mong đợi câu trả lời này. Cảm ơn bạn rất nhiều vì đã trả lời của bạn. – FreshBits

Nếu bạn muốn kiểm tra xem chuỗi là null chỉ làm if(previewImage == "") { /* image is null, do stuff */ } nhưng nếu bạn muốn kiểm tra xem hình ảnh thực sự tồn tại Tôi sẽ đề nghị thực hiện một yêu cầu GET qua AJAX và kiểm tra phản ứng HTTP, ví dụ: (jQuery):

$.ajax({ 
    url: "http://123.201.137.238:6060/feed/videoplay/Jackie.png", 
    cache: false, 
    error: function(){ 
     alert("image doesn't exist!"); 
    } 
});

Nhưng nó sẽ "đẹp hơn" để thực hiện phía máy chủ này nếu có thể.

Nguồn

2011-12-08 09:19:03 eth0

Ý tưởng tuyệt vời, nhưng không hiệu quả đối với tôi. Cảnh báo được kích hoạt mặc dù hình ảnh tồn tại. – Jpsy

Cách xác thực nội dung trong URL (Javascript)

Trả lời

Các vấn đề liên quan