jQuery / JavaScript来replace破碎的图像

我有一个包含一堆图像的网页。 有时图像不可用,所以在客户端的浏览器中显示破碎的图像。

如何使用jQuery获取图像集,将其过滤为破碎的图像,然后replacesrc?


– 我认为使用jQuery来做这件事会容易些,但是使用纯粹的JavaScript解决scheme,也就是Prestaul提供的解决scheme,要容易得多。

处理图像的onError事件以使用JavaScript重新分配其源代码:

 function imgError(image) { image.onerror = ""; image.src = "http://img.dovov.comnoimage.gif"; return true; } 
 <img src="image.png" onerror="imgError(this);"/> 

或者没有JavaScriptfunction:

 <img src="image.png" onError="this.onerror=null;this.src='http://img.dovov.comnoimage.gif';" /> 

以下兼容性列表列出了支持错误工具的浏览器:

http://www.quirksmode.org/dom/events/error.html

我使用内置的error处理程序:

 $("img").error(function () { $(this).unbind("error").attr("src", "broken.gif"); }); 

error()在1.8或更高版本中被弃用。

如果像我这样的人试图将error事件附加到一个dynamic的HTML img标签,我想指出的是,有一个问题:

显然,在大多数浏览器中, img错误事件不会冒泡 ,与标准所说的相反。

所以,像下面这样的东西是行不通的

 $(document).on('error', 'img', function () { ... }) 

希望这会对别人有帮助。 我希望我在这里看到这个线程。 但是,我没有。 所以,我正在添加它

这是一个独立的解决scheme:

 $(window).load(function() { $('img').each(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { // image was broken, replace with your new image this.src = 'http://www.tranism.com/webloghttp://img.dovov.combroken_ipod.gif'; } }); }); 

我相信这就是你所追求的: jQuery.Preload

以下是演示中的示例代码,指定加载和未find的图像,然后全部设置:

 $('#images img').preload({ placeholder:'placeholder.jpg', notFound:'notfound.jpg' }); 
 $(window).bind('load', function() { $('img').each(function() { if((typeof this.naturalWidth != "undefined" && this.naturalWidth == 0 ) || this.readyState == 'uninitialized' ) { $(this).attr('src', 'missing.jpg'); } }); }) 

资料来源: http : //www.developria.com/2009/03/jquery-quickie—broken-images.html

我找不到适合我需要的脚本,所以我做了一个recursion函数来检查破损的图像,并尝试每四秒重新加载它们,直到它们被修复。

我把它限制为10次,就好像它没有加载,然后图像可能不会出现在服务器上,function将进入无限循环。 我仍然在testing。 随意调整它:)

 var retries = 0; $.imgReload = function() { var loaded = 1; $("img").each(function() { if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { var src = $(this).attr("src"); var date = new Date(); $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache loaded =0; } }); retries +=1; if (retries < 10) { // If after 10 retries error images are not fixed maybe because they // are not present on server, the recursion will break the loop if (loaded == 0) { setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server } // All images have been loaded else { // alert("images loaded"); } } // If error images cannot be loaded after 10 retries else { // alert("recursion exceeded"); } } jQuery(document).ready(function() { setTimeout('$.imgReload()',5000); }); 

这里是一个快速和脏的方式来取代所有破碎的图像,并没有必要改变HTML代码;)

http://ashfaqahmed.net/jquery-replacing-broken-images/

 $("img").each(function() { var NoImageUrl = "http://www.acsu.buffalo.edu/~rslaine/imageNotFound.jpg"; var image = $(this); var ThisHeight = $(image).css("height"); var ThisWidth = $(image).css("width"); if (image.context.naturalWidth == 0 || image.readyState == 'uninitialized') { $(image).unbind("error").attr("src", NoImageUrl).css( { height: ThisHeight, width: ThisWidth, }); } }); 

这是一个糟糕的技术,但它有很大的保证:

 <img ... onerror="this.parentNode.removeChild(this);"> 

虽然OP希望取代SRC,但我相信很多人触及这个问题可能只是希望隐藏破碎的图像,在这种情况下, 这个简单的解决scheme对我来说非常有用:

 <img src="someimage.jpg" onerror="this.style.display='none';" /> 

你可以使用GitHub自己的获取:

前端: https : //github.com/github/fetch
或为后端,一个Node.js版本: https : //github.com/bitinn/node-fetch

 fetch(url) .then(function(res) { if (res.status == '200') { return image; } else { return placeholder; } } 

编辑:这种方法将取代XHR,应该已经在Chrome中。 对于将来阅读此内容的任何人,您可能不需要上述库。

更好的呼叫使用

 jQuery(window).load(function(){ $.imgReload(); }); 

因为使用document.ready并不意味着图像加载,只有HTML。 因此,不需要延迟的呼叫。

CoffeeScript变体:

我使用了Turbolinks来解决一个问题,即使图像真的存在,也会导致在Firefox中引发.error()方法。

 $("img").error -> e = $(@).get 0 $(@).hide() if !$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) 

通过使用Prestaul的答案 ,我添加了一些检查,我更喜欢使用jQuery的方式。

 <img src="image1.png" onerror="imgError(this,1);"/> <img src="image2.png" onerror="imgError(this,2);"/> function imgError(image, type) { if (typeof jQuery !== 'undefined') { var imgWidth=$(image).attr("width"); var imgHeight=$(image).attr("height"); // Type 1 puts a placeholder image // Type 2 hides img tag if (type == 1) { if (typeof imgWidth !== 'undefined' && typeof imgHeight !== 'undefined') { $(image).attr("src", "http://lorempixel.com/" + imgWidth + "/" + imgHeight + "/"); } else { $(image).attr("src", "http://lorempixel.com/200/200/"); } } else if (type == 2) { $(image).hide(); } } return true; } 

如果你已经用innerHTML插入了你的img ,比如: $("div").innerHTML = <img src="wrong-uri"> ,你可以加载另外一张图片,例如:

 <script> function imgError(img) { img.error=""; img.src="valid-uri"; } </script> <img src="wrong-uri" onerror="javascript:imgError(this)"> 

为什么是javascript: _需要? 因为通过脚本标记注入到DOM中的脚本在注入时不会运行,所以必须明确。

我发现这篇文章,而看着这个其他SOpost 。 以下是我在那里给出的答案的副本。

我知道这是一个古老的线程,但是React已经变得stream行,也许有人使用React来到这里寻找同样问题的答案。

所以,如果你使用的是React,你可以做下面这样的事情,这是React团队的Ben Alpert在这里提供的答案

 getInitialState: function(event) { return {image: "http://example.com/primary_image.jpg"}; }, handleError: function(event) { this.setState({image: "http://example.com/failover_image.jpg"}); }, render: function() { return ( <img onError={this.handleError} src={src} />; ); } 

我创build了一个小提琴来replace使用“onerror”事件破碎的图像。 这可能会帮助你。

  //the placeholder image url var defaultUrl = "url('https://sadasd/image02.png')"; $('div').each(function(index, item) { var currentUrl = $(item).css("background-image").replace(/^url\(['"](.+)['"]\)/, '$1'); $('<img>', { src: currentUrl }).on("error", function(e) { $this = $(this); $this.css({ "background-image": defaultUrl }) e.target.remove() }.bind(this)) }) 

这是一个使用JQuery包装的HTML5 Image对象的例子。 调用主图像URL的加载函数,如果该加载导致错误,请将图像的src属性replace为备用URL。

 function loadImageUseBackupUrlOnError(imgId, primaryUrl, backupUrl) { var $img = $('#' + imgId); $(new Image()).load().error(function() { $img.attr('src', backupUrl); }).attr('src', primaryUrl) } <img id="myImage" src="primary-image-url"/> <script> loadImageUseBackupUrlOnError('myImage','primary-image-url','backup-image-url'); </script> 

纯JS。 我的任务是:如果图像'bl-once.png'是空的 – >从数组列表(在当前目录中)插入第一个(没有404状态)图像:

 <img src="http://localhost:63342/GetImage/bl-once.png" width="200" onerror="replaceEmptyImage.insertImg(this)"> 

这是JavaScript,应该跨浏览器兼容,并提供没有丑陋的标记onerror=""

 var sPathToDefaultImg = 'stackexchange/img/logos/so/so-icon.png', validateImage = function( domImg ) { oImg = new Image(); oImg.onerror = function() { domImg.src = sPathToDefaultImg; }; oImg.src = domImg.src; }, aImg = document.getElementsByTagName( 'IMG' ), i = aImg.length; while ( i-- ) { validateImage( aImg[i] ); } 

CODEPEN:

我不确定是否有更好的方法,但我可以想象得到它 – 你可以将Ajax发布到img URL,并parsing响应以查看图像是否实际返回。 如果它返回404或什么的,那么换出img。 虽然我预计这会很慢。

我用这两个简单的函数解决了我的问题:

 function imgExists(imgPath) { var http = jQuery.ajax({ type:"HEAD", url: imgPath, async: false }); return http.status != 404; } function handleImageError() { var imgPath; $('img').each(function() { imgPath = $(this).attr('src'); if (!imgExists(imgPath)) { $(this).attr('src', 'images/noimage.jpg'); } }); } 

jQuery 1.8

 // If missing.png is missing, it is replaced by replacement.png $( "img" ) .error(function() { $( this ).attr( "src", "replacement.png" ); }) .attr( "src", "missing.png" ); 

jQuery 3

 // If missing.png is missing, it is replaced by replacement.png $( "img" ) .on("error", function() { $( this ).attr( "src", "replacement.png" ); }) .attr( "src", "missing.png" ); 

参考

 ;(window.jQuery || window.Zepto).fn.fallback = function (fallback) { return this.one('error', function () { var self = this; this.src = (fallback || 'http://lorempixel.com/$width/$height') .replace(/\$(\w+)/g, function (m, t) { return self[t] || ''; }); }); }; 

您可以传递占位符path,并通过$*存取失败映像对象中的所有属性:

 $('img').fallback('http://dummyimage.com/$widthx$height&text=$src'); 

http://jsfiddle.net/ARTsinn/Cu4Zn/

多年来,这一直令我沮丧。 我的CSS修补程序在img上设置了一个背景图像。 当一个dynamic图像src没有加载到前台时,在img的bg上可以看到一个占位符。 如果您的图像具有默认大小(例如, heightmin-heightwidth和/或min-width ),这将起作用。

你会看到破碎的图像图标,但这是一个改进。 testing成功IE9。 iOS Safari和Chrome甚至不会显示破损的图标。

 .dynamicContainer img { background: url('http://img.dovov.complaceholder.png'); background-size: contain; } 

添加一些animation给src时间加载没有背景闪烁。 Chrome平滑地在后台淡出,但桌面Safari没有。

 .dynamicContainer img { background: url('http://img.dovov.complaceholder.png'); background-size: contain; -webkit-animation: fadein 1s; animation: fadein 1s; } @-webkit-keyframes fadein { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } @keyframes fadein { 0% { opacity: 0.0; } 50% { opacity: 0.5; } 100% { opacity: 1.0; } } 

我使用下面的代码,首先尝试根据用户标识(在本例中为“123”)查找当前用户的头像,如果找不到头像图像,则onerror代码会将img src更改为占位符图像。

 <img src="avatars/users/123.png" onerror="this.src='/ngTribeBase/src/assets/img/avatars/male.png'" /> 
Interesting Posts