Javascript 背景图像不是'；模糊'；什么时候加载

我正在制作一个网站，在该网站中，背景图像的较小版本被放置到位，直到图像完全加载。 加载预期图像后，将启动一个函数以应用CSS类，该类使原始较小的像素化背景成为图像锐化的效果

我的问题是，在页面第一次加载这个效果时，它是不可见的，如果页面被刷新，效果是可见的，并且看起来像预期的那样

我正试着去做

这是我的页面

我的JS脚本：

//desktop version
 $('<img/>').attr('src', './img/backgroundBig.jpg').on('load', function() {
                $(this).remove();  
                document.documentElement.style.setProperty('--bg-wide', "url('../img/backgroundBig.jpg')");
                $('.overlay-img').addClass('sharp-in');
            });

//tablet
           $('<img/>').attr('src', './img/backgroundMobile.jpg').on('load', function() {
                $(this).remove();  
                document.documentElement.style.setProperty('--bg-narrow', "url('../img/backgroundMobile.jpg')");
                 $('.overlay-img').addClass('sharp-in');
           });

//桌面版
$（''）.attr（'src'，'./img/backgroundMobile.jpg'）。on（'load'，function（）{
$（this.remove（）；
document.documentElement.style.setProperty（'--bg-shown'，“url（'../img/backgroundMobile.jpg'））；
$（'.overlay img'）.addClass（'sharp-in'）；
});

在脚本中，我尝试加载图像，加载后，我将CSS变量更改为实际图像，并添加一个具有图像“sharp up”动画的类

CSS变量最初是以64为基数的较小的像素化版本

---

如何始终应用此效果？

您可以将低清晰度图像作为hd图像的同级图像，使其适合其父图像的内容，这样我们就不会看到加载的高清晰度图像，然后，当您的hd图像完全加载时，只需删除模糊覆盖即可

下面是一个例子来说明：

html

jquery

$('#hd-image').on('load', function() {
    $('#blurred-image').fadeOut();
});

---

寻求帮助的问题（“为什么没有/如何使此代码工作？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现所需的最短代码。请参阅：如何创建。@LGSon我说过代码可以工作，但在页面刷新或已在缓存中之后，我还将页面放入缓存（这非常简单）

#hd-image {
    position: relative;
}
#blurred-image {
    background-image: url('path/to/blurred/image');
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

$('#hd-image').on('load', function() {
    $('#blurred-image').fadeOut();
});