让 window 'load' 事件侦听器在某些特定图像完成加载之前被触发

Question

因此，我使用以下代码在我的网站中显示加载程序：

$(window).on("load", function(){
    $(".loader").fadeOut("slow");
})

但是有一个 Carousel 有很多图片。我想从加载中“排除”这些图像，因此事件 'load' 在这些图像完成加载之前被触发。因为那样加载器会消失，但是几乎在网站末尾的轮播图像会继续加载而不会阻止用户查看网站。

有办法吗？（比如在我想从 'load' 事件侦听器或其他东西中排除的图像中添加 class...）

Answer 1

所以，我发现这样做的唯一方法是添加一个属性（在这个例子中：data-src）和我不想等待加载的图像的实际 src:

<img data-src="example.jpg" src="">

那么您只需要在调用 window 事件 'load' 后加载图像：

window.addEventListener('load', () => {
    const imgs = document.querySelectorAll('[data-src]');
    imgs.forEach(img => {
        img.setAttribute('src', img.getAttribute('data-src'));
    });
});

我认为这是实现 'lazy loading' 的一种非常原始的方式，但它现在有效...

让 window 'load' 事件侦听器在某些特定图像完成加载之前被触发

Let window 'load' Event Listener be triggered before some specific images finish loading

javascript

event-listener

pageload