我正在我的计算机上尝试为图像创建一个lazyloader,它动态地将css值background-image
替换为属性data-bgimg
这样做的代码非常简单。请参阅下面:
$(document).ready(function(){
$('.lazyloadbg').each(function(i, e) {
if ($(e).attr('data-bgimg')) {
$(e).css({ "background-image": "url('" + $(e).attr('data-bgimg') + "')" });
}
});
});
字符串
因此,当有一个类为lazyloadbg
的元素时,
<div class="lazyloadbg" data-bgimg="/something.jpg">
</div>
型
背景图像在页面代码加载后会自动替换。
现在问题来了
对于大图像(正如你可以从这个链接的图像中看到的),图像会损坏,我得到了一个名为“NS_ERROR_NET_PARTIAL_TRANSFER
“的错误。
NS_ERROR_NET_PARTIAL_TRANSFER
- 图像特大是为了测试而特别制作的 *(超过50MB)。
现在,如何检测图像是否损坏?
我试着做了一些
document.addEventListener('error', e => {
if (e.target.matches('img')) {
console.log(e.type, e.target, e);
} else if (e.target.matches('script')) {
//do nothing
} else if (e.target.matches('style')) {
//do nothing
} else if (e.target.matches('link')) {
//do nothing
} else if (e.target.matches('iframe')) {
//do nothing
} else {
console.log(e.type, e.target, e);
}
}, true);
document.addEventListener('load', e => {
if (e.target.matches('img')) {
console.log(e.type, e.target, e);
} else if (e.target.matches('script')) {
//do nothing
} else if (e.target.matches('style')) {
//do nothing
} else if (e.target.matches('link')) {
//do nothing
} else if (e.target.matches('iframe')) {
//do nothing
} else {
console.log(e.type, e.target, e);
}
}, true);
型
但是错误和加载没有被检测为事件(我说的是背景图像样式的变化)。
- 如何解决这个问题?*
P.S.我甚至试过像在这个答案How to detect broken CSS background images?
const items = document.querySelectorAll('.lazyloadbg');
items.forEach((item) => {
const imageURL = window.getComputedStyle(item).getPropertyValue('background-image');
const rgURL = /url\(['|"](.+)['|"]\)/gi;
const imgSrc = (rgURL).exec(imageURL)[1];
const img = document.createElement('img');
img.setAttribute('src', imgSrc);
img.addEventListener('error', ({ target }) => {
console.warn(`${target.src} is not found`);
item.style.borderColor = 'red';
})
});
型
但应该触发的事件却没有触发。
2条答案
按热度按时间f87krz0w1#
你可以尝试这样的东西:
字符串
7kjnsjlb2#
看起来你试图通过JavaScript检测和处理使用background-image属性设置的背景图像的错误。不幸的是,通常与标签相关的错误和加载事件不适用于CSS中设置的背景图像。
处理此问题的一种方法是使用JavaScript预加载图像,然后在预加载过程中检查错误。下面是使用您的代码的示例:
字符串
在本例中,为每个.lazyloadbg元素创建一个Image对象,并使用onload和onerror事件分别处理成功和失败情况。这样,您可以在预加载过程中捕获错误并采取适当的操作。
请记住,预加载图像可能会增加页面的初始加载时间,特别是在有许多大图像的情况下。如果性能问题,请考虑优化图像或实施更高级的延迟加载解决方案。