title: How to check image url is 404 using javascript
body: <p>Use Case:</p>
  
  <ol>
  <li>when src is not null and alt tag is not null then show image of src.</li>
  <li>then check src image url is not 404.</li>
  <li>when src is null and alt is not null the show image of first name.</li>
  <li>when src and alt are null then show default image</li>
  </ol>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;img class="imagelazy" id="lazyimage" src="http://url" alt="ankit"&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>function imagelazy() {
  
      $(document).ready(function()
  
          {
              var image = $(".imagelazy").attr('src');
              var altdata = $(".imagelazy").attr('alt');
              var alt = $(".imagelazy").attr('alt').split("");
              //var imagepath="http://im.gifbt.com/userimages/"+alt[0].toLowerCase()+".jpg";
              var defaultimage = "http://im.gifbt.com/img/no-pic.jpg";
              console.log(image);
              console.log(alt);
              $(".imagelazy img")
                  .error(function() {
                      $(this).hide();
                  })
                  .attr("src", defaultimage);
  
              if (image != '' &amp;&amp; altdata != '') {
                  console.log("afeef");
                  $('.imagelazy').bind('error', function() {
                      $(this).attr("src", defaultimage);
                  });
                  $(".imagelazy img")
                      .error(function() {
                          $(this).hide();
                      })
                      .attr("src", defaultimage);
  
  
              } else if (image == '' &amp;&amp; altdata != '') {
                  $.each($('.imagelazy'), function(index, value) {
                      var alt1 = $(this).attr('alt').split("");
                      console.log(alt1);
                      if (alt1 != '') {
                          var imagepath1 = "http://im.gifbt.com/userimages/" + alt1[0].toLowerCase() + ".jpg";
                      }
                      console.log(this.outerHTML);
                      console.log(imagepath1);
                      $(this).attr("src", imagepath1);
                  });
  
  
              } else if (altdata == '' &amp;&amp; image == '') {
                  $.each($('.imagelazy'), function(index, value) {
                      $(this).attr("src", defaultimage);
                      console.log(this.outerHTML);
                  });
              }
  
          });
  }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <ul>
  <li>Script is not working when scrolling down the page.</li>
  <li>When the image is set in src and alt tag is set then also first name image is displayed.</li>
  <li><code>onerror</code> is not working in js.</li>
  <li>i have googled a lot coudln"t found the solution for this issue.</li>
  <li>i have found lazy.min.js js which set src="" and data-src="pathimage"
  would handled this issue.</li>
  <li><p>our requirement is optimize html that why im searching for alternate solution through js.</p></li>
  <li><p>i have found jquery link : <a href="https://api.jquery.com/error/" rel="noreferrer">https://api.jquery.com/error/</a></p></li>
  </ul>