奇怪的JS或CSS（无法找出哪个问题）相关问题

Question

请访问this link。

当我在chrome或firefox上打开它并多次刷新时，我会看到以下屏幕：

我真的无法理解为什么会出现这个问题。此外，两种浏览器上的firebug都没有错误：Chrome和Firefox。有什么建议？

Answer 1

尝试给#front-slides一个高度（在这种情况下为370px）并将其设置为overflow: hidden;，然后移除.slides_container上的溢出。

这似乎解决了我的问题，问题似乎是.slides_control的高度设置错误，显然它在加载之前设置为图像高度

您的另一个解决方案是手动将.slides_control的高度设置为370px或更改计算，直到页面加载完毕为止。

Answer 2

具有类“slides_control”的dom元素的高度正在动态设置。

有时它是18px，但在其他情况下它是370px。

如果您将高度显式设置为370像素，它可以正常工作，但您可能需要进一步研究它为什么在您的代码中设置不同的值。

Answer 3

问题是，在加载所有图像之前，您的功能（与滑块相关）会触发。将，移动到window.onload，如下所示

window.onload = function () {
    //##########################################
    // Front slides
    //##########################################

    $('#front-slides').slides({
        preload: true,
        preloadImage: 'design/img/elems/loading.gif',
        generateNextPrev: false,
        play: 5000,
        pause: 2500,
        hoverPause: true,
        animationStart: function(current){
            $("#headline h6").fadeOut("slow");
        },
        animationComplete: function(current){
            $slideCaption = $(".slides_container div.slide:eq("+ (current-1) +") .caption").text();
            $("#headline h6").text($slideCaption);
            if($slideCaption != ''){
                $("#headline h6").fadeIn("slow");
            }else{
                $("#headline").hide("slow");
            }
        }

    });

    // default headline
    $firstCaption = $(".slides_container div.slide:eq(0) .caption").text();
    if($firstCaption != ''){
        $("#headline h6").text($firstCaption);
    }else{
        $("#headline").hide();
    }

}