javascript 如何检测每个页面lazyload元素的背景图像加载,以防止损坏的图像

cl25kdpy  于 12个月前  发布在  Java
关注(0)|答案(2)|浏览(121)

我正在我的计算机上尝试为图像创建一个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';
      })
    });


但应该触发的事件却没有触发。

f87krz0w

f87krz0w1#

你可以尝试这样的东西:

const items = document.querySelectorAll('.lazyloadbg');

function loadImages() {
    const promises = [];
    items.forEach((image) => {
        promises.push(new Promise((resolve, reject) => {
            image.onload = () => resolve(image.src);
            image.onerror = () => reject();
        }));
    });
    return Promise.allSettled(promises)//return all promises, rejected or resolver
};

loadImages().then((imageUrl) => {
    //Do something when load success
})
.catch(()=>{
    //Do something when load  throws error
})

字符串

7kjnsjlb

7kjnsjlb2#

看起来你试图通过JavaScript检测和处理使用background-image属性设置的背景图像的错误。不幸的是,通常与标签相关的错误和加载事件不适用于CSS中设置的背景图像。
处理此问题的一种方法是使用JavaScript预加载图像,然后在预加载过程中检查错误。下面是使用您的代码的示例:

$(document).ready(function () {
    $('.lazyloadbg').each(function (i, e) {
        if ($(e).attr('data-bgimg')) {
            // Create a new Image object
            var img = new Image();
            
            // Set the source to the data-bgimg attribute
            img.src = $(e).attr('data-bgimg');
            
            // Handle the load event
            img.onload = function () {
                // Image loaded successfully, update the background-image
                $(e).css({ "background-image": "url('" + img.src + "')" });
            };
            
            // Handle the error event
            img.onerror = function () {
                // Image failed to load, handle the error here
                console.error("Failed to load image: " + img.src);
            };
        }
    });
});

字符串
在本例中,为每个.lazyloadbg元素创建一个Image对象,并使用onload和onerror事件分别处理成功和失败情况。这样,您可以在预加载过程中捕获错误并采取适当的操作。
请记住,预加载图像可能会增加页面的初始加载时间,特别是在有许多大图像的情况下。如果性能问题,请考虑优化图像或实施更高级的延迟加载解决方案。

相关问题