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

时间:2018-09-11 22:20:05

标签: javascript html css

我正在制作一个网站,在该网站中放置了较小版本的背景图像,直到图像完全加载为止。 加载所需的图像后,将触发一个函数来应用CSS类,该类使原始的较小像素化背景具有锐化图像的效果。

我的问题是,在页面第一次加载此效果时,它是不可见的,如果刷新页面,则该效果是可见的,并且看起来像预期的那样。

我正在尝试制作something similar as this site

这是我的页面http://vetta.io/

我的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中具有较小的像素化版本。

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

1 个答案:

答案 0 :(得分:0)

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

这里是一个例子来说明:

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();
});