Question

我正在制作一个网站，在该网站中放置了较小版本的背景图像，直到图像完全加载为止。加载所需的图像后，将触发一个函数来应用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');
           });

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

最初，CSS变量在base 64中具有较小的像素化版本。

我可以做些什么来始终应用这种效果？

Answer 1

您可以将低清晰度图像作为高清图像的同位物，使其适合其父级的内容，这样我们就不会看到正在加载的高清图像，然后，当您的高清图像完全加载后，只需删除模糊的叠加层。

这里是一个例子来说明：

html

<div>
    <img id="hd-image" src="path">
    <div id="blurred-image"></div>
</div>

css

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

jquery

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

加载时背景图片未“模糊化”

1 个答案: