我有一个包含一堆图像的网页.有时图像不可用,因此在客户端的浏览器中显示损坏的图像.
如何使用jQuery获取图像集,将其过滤为损坏的图像然后替换src？
- 我认为使用jQuery更容易做到这一点,但结果却更容易使用纯粹的JavaScript解决方案,即Prestaul提供的解决方案.
处理onError图像事件以使用JavaScript重新分配其源:
function imgError(image) {
image.onerror = "";
image.src = "/images/noimage.gif";
return true;
}
或者没有JavaScript功能:
以下兼容性表列出了支持错误工具的浏览器:
http://www.quirksmode.org/dom/events/error.html
我使用内置error处理程序:
$("img").error(function () {
$(this).unbind("error").attr("src", "broken.gif");
});
编辑:该error()方法在1.8及更高版本中已弃用.相反,你应该使用.on("error"):
$("img").on("error", function () {
$(this).attr("src", "broken.gif");
});
如果像我这样的人尝试将error事件附加到动态HTML img标记,我想指出,有一个问题:
显然,img错误事件在大多数浏览器中都不会出现泡沫,这与标准所说的相反.
所以,像下面这样的东西将不起作用:
$(document).on('error', 'img', function () { ... })
希望这对其他人有所帮助.我希望我在这个帖子中看到过这个.但是,我没有.所以,我正在添加它
这是一个独立的解决方案:
$(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/weblog/images/broken_ipod.gif';
}
});
});
我相信这就是你所追求的:jQuery.Preload
这是演示中的示例代码,您指定了加载和未找到的图像,并且您已全部设置:
$('#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
虽然OP希望取代SRC,但我确信许多人在讨论这个问题时可能只想隐藏破碎的图像,在这种情况下,这个简单的解决方案对我来说非常有用:
这是一种快速而又脏的方法来替换所有损坏的图像,并且无需更改HTML代码;)
codepen示例
$("img").each(function(){
var img = $(this);
var image = new Image();
image.src = $(img).attr("src");
var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
$(img).unbind("error").attr("src", no_image).css({
height: $(img).css("height"),
width: $(img).css("width"),
});
}
});
我找不到适合我需要的脚本,所以我做了一个递归函数来检查损坏的图像,并尝试每四秒重新加载一次,直到它们被修复.
我把它限制为10次尝试,好像它没有被加载,然后图像可能不存在于服务器上,并且该函数将进入无限循环.我还在测试.随意调整它:)
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);
});
这是一种糟糕的技术,但它几乎得到了保证:
京公网安备 11010802040832号