Javascript 交换图像之间的黑色空间

我正在创建的网站有问题。顶部的卡车图像在向下滚动时正在更改，但在滚动和更改图像时，会出现黑色空间

1） 图像为1400x600 JPG，每个约70kb。我没有降低分辨率，因为如果有人从1920x1080屏幕访问它，卡车将变得模糊和扭曲

2） 该网站仍然没有完成，所以它现在是在一个免费的主机上（000webhost.com），这可能会导致图像加载速度变慢，出现黑色空间吗

以下是网站：

以下是更改图像的脚本，以防万一：

var numberofscroll = 0;
var lastScrollTop = 0;

$(document).ready(function () {
    var numberofscroll = 1;
    var lastScrollTop = 0;
    var totalImages = 4;
    var dontHandle = false;
    $("#home").scroll(function () {
        if (dontHandle) return; // Debounce this function.
        dontHandle = true;

        var scrollTop = $(this).scrollTop();
        (scrollTop > lastScrollTop) ? numberofscroll++ : numberofscroll--;

        if (numberofscroll > totalImages) numberofscroll = totalImages;
        else if (numberofscroll < 1) numberofscroll = 1;

        change_background(numberofscroll);

        lastScrollTop = scrollTop;
        window.setTimeout(function() {
            dontHandle = false;
        }, 150); // Debounce!--let this handler run once every 400 milliseconds.
    });

    function change_background(num) {
        $("#home").css("backgroundImage", "url('images/movie_" + num + ".jpg')");
    };
});

var numberofscroll=0；
var lastScrollTop=0；
$（文档）.ready（函数（）{
变量numberofscroll=1；
var lastScrollTop=0；
var-totalImages=4；
var dontHandle=假；
$（“#主页”）。滚动（函数（）{
if（dontHandle）return；//对该函数进行去抖动。
dontHandle=true；
var scrollTop=$（this.scrollTop（）；
（scrollTop>lastScrollTop）？numberofscroll++：numberofscroll--；
如果（numberofscroll>totalImages）numberofscroll=totalImages；
如果（numberofscroll<1）numberofscroll=1，则为else；
更改背景（numberofscroll）；
lastScrollTop=scrollTop；
setTimeout（函数（）{
dontHandle=假；
}，150）；//去盎司！——让这个处理程序每400毫秒运行一次。
});
函数更改\u背景（num）{
$（“#home”）.css（“backgroundImage”，“url（'images/movie#“+num+”.jpg'））；
};
});

您的问题与加载时间有关

当滚动开始时，您可以将需要的图像加载到页面中，而不是加载图像，这样在交换时您就没有任何加载时间

在HTML中，您有如下内容：

<div class="headimg_container>
    <img id="image_1" class="headimg" style="display: none" src=".......">
    <img id="image_2" class="headimg" style="display: none" src=".......">
    <img id="image_3" class="headimg" style="display:block" src"......">
</div>

function change_background(num) {
    $(".headimg").hide();
    $("#image_" + num).show();
};

结果将是平滑的，因为您可以毫不延迟地交换图像标记的可见性

另一个解决方案是使用精灵，但是对于一些沉重的图像，您可能希望按照我上面的建议分别加载它们

---

希望有帮助

您的问题与加载时间有关

当滚动开始时，您可以将需要的图像加载到页面中，而不是加载图像，这样在交换时您就没有任何加载时间

在HTML中，您有如下内容：

<div class="headimg_container>
    <img id="image_1" class="headimg" style="display: none" src=".......">
    <img id="image_2" class="headimg" style="display: none" src=".......">
    <img id="image_3" class="headimg" style="display:block" src"......">
</div>

function change_background(num) {
    $(".headimg").hide();
    $("#image_" + num).show();
};

结果将是平滑的，因为您可以毫不延迟地交换图像标记的可见性

另一个解决方案是使用精灵，但是对于一些沉重的图像，您可能希望按照我上面的建议分别加载它们

希望有帮助