title: jQuery to check image exists if head 404 than hide it
body: <p>Using php to get 100 photos url from a db and show them on a page, but some photos may no longer exist. If the photo url is fail (404) I want to use jquery to hide the image and don't want to show any error picture. This is my code but it doesn't work.</p>
  
  <p>html</p>
  
  <pre><code>&lt;div id=test&gt;
      &lt;img src="http://test.com/test1.jpg" /&gt;
      &lt;img src=" http://test.com/test2.jpg" /&gt;
      &lt;img src="http://test.com/test3.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>var pic_list = jQuery("#test img");
  
  pic_list.load(function () {
      var http = new XMLHttpRequest();
      http.open('HEAD', pic_list, false);
      http.send();
      if (http.status == 404) {
          pic_list.hide();
      } else {
          pic_list.show();
      }
  });
  </code></pre>