Question

我对jQuery和JS还是很陌生，并被要求编写一个脚本，该脚本将逐步加载background-image-我的意思是低质量的图像应立即显示，并且在加载全尺寸图像时应替换较小的图像一个。

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

$('.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/

替换背景图像的流畅方法

2 个答案: