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

结果会很顺利，因为您可以毫不拖延地交换图像标签的可见性。

另一个解决方案可能是使用精灵，但是有一些沉重的图像，你可能想坚持按照我的建议单独加载它们。

希望有所帮助！

交换图像之间的黑色空间

1 个答案: