javascript - 交换图像之间的黑色空间

Question

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

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

2)网站还没有完成，所以现在在免费托管(000webhost.com)上，这可能会导致图像加载速度变慢并且出现黑色空间吗？

这是网站:http://denea.comeze.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')");
    };
});

Answer 1

您的问题与加载时间有关。

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

在 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>

我使用headimg_container作为容器元素。该类应该有一个确定的高度，因此当隐藏和显示图像时，容器不会折叠。

在 JS 中你可以做这样的事情:

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

结果会很顺利，因为您可以交换图像标签的可见性，没有任何延迟。

另一种解决方案可能是使用 Sprite ，但对于一些沉重的图像，您可能需要坚持按照我上面的建议单独加载它们。

希望有帮助!