How to check if image exists with given url

Question

I want to check if an image exists using jquery   For example how do I check this image exists  http   www google com images srpr nav logo14 png    the check must give me a 200 or status ok  --------------edited-------------------  var imgsrc     this  attr  src    var imgcheck   imgsrc width    if  imgcheck  0    alert  You have a zero size image      else     do rest of code     Thanks Jean

User · Answer

From here      when the DOM is ready   function        var img   new Image         wrap our new image in jQuery  then      img         once the image has loaded  execute this code      load function               set the image hidden by default             this  hide             with the holding div  loader  apply            loader              remove the loading class  so no background spinner             removeClass  loading              then insert our image          append this            fade our image in to create a nice effect         this  fadeIn                  if there was an error loading the image  react accordingly      error function               notify the user that the image could not be loaded                finally   set the src attribute of the new image to our image      attr  src    images headshot jpg

User · Answer

Use the error handler like this       image id   error function       alert  Image does not exist             If the image cannot be loaded  for example  because it is not present at the supplied URL   the alert is displayed   Update   I think using     ajax  url  somefile dat  type  HEAD  error do something      would be enough to check for a 404   More Readings    http   www jibbering com 2002 4 httprequest html http   www ibm com developerworks web library wa-ajaxintro3    Update 2   Your code should be like this     this  error function       alert  Image does not exist             No need for these lines and that won t check if the remote file exists anyway   var imgcheck   imgsrc width       if  imgcheck  0      alert  You have a zero size image      else        execute the rest of code here

User · Answer

To handle the lazy loading with image existence check I followed this in jQuery-      data-src    each function       var  image place holder element     this     var image url     this  data  src          lt div class  hidden-classe    gt    load image url  function response  status  xhr        if    status     error             image place holder element removeClass  image-placeholder           image place holder element attr  src   image url              remove          Reason  if I am using  image place holder element load   method it will be adding the response to the element  so random div and removing it appeared me a good solution  Hope it works for someone trying to implement lazy loading along with url check

User · Answer

Use Case      myImg   safeUrl  wanted  http   example nature png  rm   myproject images anonym png       API      fn safeUrl function args     var that this    if   that  attr  data-safeurl    amp  amp    that  attr  data-safeurl        found            return that     else           ajax       url args wanted      type  HEAD       error          function                  that  attr  src  args rm                 success          function                   that  attr  src  args wanted                 that  attr  data-safeurl   found                                return that         Note   rm means here risk managment      Another Use Case        myImg   safeUrl  wanted  http   example 1 png  rm  http   example 2 png     safeUrl  wanted  http   example 2 png  rm  http   example 3 png         http   example 1 png     if not exist  http   example 2 png   http   example 2 png     if not exist  http   example 3 png

User · Answer

jQuery 3 0 removed  error  Correct syntax is now    this  on  error   function        console log  Image does not exist      this id

User · Answer

ajax       url  http   www example com somefile ext       type  HEAD       error  function                  do something depressing            success  function                  do something cheerful                from  http   www ambitionlab com how-to-check-if-a-file-exists-using-jquery-2010-01-06

User · Answer

if it doesnt exist load default image or handle error     img id  imgurl    load imgurl  function response  status  xhr        if  status     error              this  attr  src    images DEFAULT JPG        else           this  attr  src   imgurl

[jquery] How to check if image exists with given url?

Examples related to jquery