2011-12-08 28 views
5

Tengo URL en la fuente JSON n cada URL contiene una imagen. Quiero validar las URL que tienen imagen o no (NULL). Cómo validar esto usando javascript. ya que soy un principiante, no sé, cómo validar esto. graciasCómo validar un contenido en la dirección 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", 

     }, 
+1

Se puede publicar JSON muestra, preferiblemente con enlaces accesibles a los demás. Además, publique el código que ha escrito/intentado hasta ahora. –

+0

No puede hacer esto solo con JavaScript a menos que todas las imágenes estén alojadas en el mismo dominio que su JavaScript. ¿Es este el caso? –

+0

¿Hay alguna otra manera? para hacer esto – FreshBits

Respuesta

1

¡Pregunta interesante!

Intente agregar las imágenes a un div (use jQuery, el div puede ocultarse usando display: none;).
Luego pruebe las propiedades de las imágenes regularmente (use un setInterval loop) si indican una carga exitosa. Define algún tiempo de espera después del cual setInterval se matará.

Esta propiedad funciona para pruebas de carga img éxito en Chrome y Firefox:

naturalHeight != 0 

Esta propiedad funciona para pruebas de carga img éxito en IE7,8,9:

fileCreatedDate != '' 

prueba tanto para hacer funciona en todos los principales navegadores.

Aquí hay un violín para ver cómo los accesorios cambian en pasos de 10ms durante el proceso de carga. Probarlo en diferentes navegadores !:
http://jsfiddle.net/xGmdP/

En Chrome y FF incluso se puede sustituir el tiempo de espera para el bucle setInterval marcando la completa propiedad de todas las imágenes. Pero lamentablemente esto no funciona en IE (completo siempre se mantiene falso en IE para las imágenes que no se pueden cargar).

Finalmente aquí está el código completo del violín:

<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> 
+0

¡Ouch! ¡Estupendo! Yo espero exactamente esta respuesta. Muchas gracias por su respuesta. – FreshBits

0

Si desea comprobar si la cadena es nula simplemente hacer if(previewImage == "") { /* image is null, do stuff */ } pero si usted quiere comprobar si la imagen existe en realidad yo sugeriría hacer una petición GET a través de AJAX y comprobar la respuesta HTTP, por ejemplo: (jQuery):

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

Pero sería "más agradable" hacer este lado del servidor si es posible.

+1

Gran idea, pero no funciona para mí. La alerta se activa aunque la imagen exista. – Jpsy

Cuestiones relacionadas