替换背景图像的流畅方法

Question

我是jQuery和JS的新手，并被要求编写一个脚本来逐步加载background-image -我的意思是低质量的图像应立即出现，当加载完整尺寸的图像时应替换较小的图像。

我发现了一些技巧，可以通过在background-image之上分层<img />来做类似的事情，但是就我而言，我只需要处理background-image ，所以我做到了：

$('.img-loader').each(function(){
    var box = this;

    var smallImg = $(this).attr('style');
    var bigImg = smallImg.replace('.jpg)', 'big.jpg)');
    var imgUrl = bigImg.replace('background-image: url', '');
    var imgUrlS = imgUrl.replace(/[{()}]/g, '');
    console.log(imgUrlS);

    $('<img/>').attr('src', imgUrlS).load(function(){
        $(this).remove();
        $(box).attr('style', bigImg);
    });
})

该脚本基本上可以完成这项工作，但是在替换图像的那一刻，出现了非常明显的“抖动”。

有什么想法可以使过渡更顺畅，还是有人知道是什么导致了这种“震动”？

编辑：根据建议，我添加了一个标记，其中标记了必须应用脚本的位置。

<div class="about__section__bgimage img-loader"
style="background-image: url(<?php echo $contentBlock->imageurl ?>)"></div>

Answer 1

我建议您创建两个具有相同大小的独立元素，彼此重叠，并具有以下位置：绝对； 使用原始bg图像（使用不透明度：1）使其中之一可见。 第二个不可见（使用opacity：0）

完全加载更高质量的图像后，将原始图像的不透明度设置为0，将新图像的不透明度设置为1。

在opacity属性上使用css过渡，以使不透明度平滑变化。

Answer 2

您必须为此使用动画。 根据您的情况使用其中任何一个，享受它！ https://daneden.github.io/animate.css/