让窗口"加载"事件侦听器在某些特定图像完成加载之前触发

Question

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

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

但有一个旋转木马有很多图像。我想"；排除"；加载中的图像，因此在这些图像完成加载之前触发事件"加载"。因为那时加载程序会褪色，但几乎在网站末尾的转盘图像会继续加载，而不会阻止用户查看网站。

有办法做到这一点吗？(比如在我想从"加载"事件侦听器或其他东西中排除的图像中添加一个类…(

Answer 1

因此，我找到的唯一方法是向我不想等待加载的图像添加一个具有实际src的属性(在本例中为：data-src(：

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

然后你只需要在窗口后加载图像事件"加载"被调用：

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

我相信这是实现"懒惰加载"的一种非常原始的方式，但它目前有效。。。