如何检查图像是否存在给定的url？

我想检查图像是否存在使用jQuery。

例如，我如何检查这个图像存在

http://www.google.comhttp://img.dovov.comsrpr/nav_logo14.png 

支票必须给我一个200或状态好

————–编辑——————-

 var imgsrc = $(this).attr('src'); var imgcheck = imgsrc.width; if (imgcheck==0) { alert("You have a zero size image"); } else { //do rest of code } 

谢谢Jean

Answer 1

使用像这样的error处理程序：

 $('#image_id').error(function() { alert('Image does not exist !!'); }); 

如果图像无法加载（例如，因为它不在提供的URL中），则显示警报：

更新：

我认为使用：

 $.ajax({url:'somefile.dat',type:'HEAD',error:do_something}); 

将足以检查一个404。

更多阅读：

• http://www.jibbering.com/2002/4/httprequest.html
• http://www.ibm.com/developerworks/web/library/wa-ajaxintro3/

更新2：

你的代码应该是这样的：

 $(this).error(function() { alert('Image does not exist !!'); }); 

不需要这些行，并且不会检查远程文件是否存在：

 var imgcheck = imgsrc.width; if (imgcheck==0) { alert("You have a zero size image"); } else { //execute the rest of code here } 

Answer 2

 $.ajax({ url:'http://www.example.com/somefile.ext', type:'HEAD', error: function(){ //do something depressing }, success: function(){ //do something cheerful :) } }); 

来自： http : //www.ambitionlab.com/how-to-check-if-a-file-exists-using-jquery-2010-01-06

Answer 3

如果它不存在加载默认图像或处理错误

 $('img[id$=imgurl]').load(imgurl, function(response, status, xhr) { if (status == "error") $(this).attr('src', 'images/DEFAULT.JPG'); else $(this).attr('src', imgurl); }); 

Answer 4

用例

 $('#myImg').safeUrl({wanted:"http://example/nature.png",rm:"/myprojecthttp://img.dovov.comanonym.png"}); 

API：

 $.fn.safeUrl=function(args){ var that=this; if($(that).attr('data-safeurl') && $(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; }; 

---

注意： rm表示风险pipe理。

---

另一个用例：

 $('#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 '：如果不存在' http://example/2.png '

• ' http://example/2.png '：如果不存在' http://example/3.png '

Answer 5

从这里 ：

 // 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'); });