Question

我正在开发的网页上有一个缩略图滑块。现在，当我进入网站时，它只显示了一小块图片，但是一旦我刷新页面一切都很好，任何想法为什么会发生这种情况

http://www.ap2x.gbes.co.za/1/1.html 这是有问题的页面

我在firefox，chrome和IE上测试过。错误似乎不是浏览器特定的

Slider完全脱机工作，没有这样的问题。我不知道是什么导致了这个

        $(function() {

            //  wrap all thumbs in a <div> for the 3x3 grid
            $div = null;
            $('#thumbs').children().each(function(i) {
                if ( i % 9 == 0) {
                    $div = $( '<div />' );
                    $div.appendTo( '#thumbs' );
                }
                $(this).appendTo( $div );
                $(this).addClass( 'itm'+i );
                $(this).click(function() {
                    $('#images').trigger( 'slideTo', [i, 0, true] );
                });
            });
            $('#thumbs img.itm0').addClass( 'selected' );

            //  the big-image carousel
            $('#images').carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                width: 500,
                height: 281,
                items: 1,
                auto: false,
                scroll: {
                    fx: 'directscroll',
                    onBefore: function() {
                        var pos = $(this).triggerHandler( 'currentPosition' );
                        $('#thumbs img').removeClass( 'selected' );
                        $('#thumbs img.itm'+pos).addClass( 'selected' );

                        var page = Math.floor( pos / 9 );
                        $('#thumbs').trigger( 'slideToPage', page );
                    }
                }
            });

            //  the thumbnail-carousel
            $('#thumbs').carouFredSel({
                direction: 'up',
                circular: false,
                infinite: false,
                width: 550,
                height: 150,
                items: 1,
                align: false,
                auto: false,
            });
        });

Answer 1

我打赌你用Chrome浏览这个网站。当他无法确定元素的高度时，此浏览器存在一个令人讨厌的错误。解决方法是通过css手动设置每个滑块图像的宽度和高度。

Answer 2

听起来它在图像加载之后才能工作，所以你需要告诉滑块加载后图像的大小，或者在运行脚本之前等待它们加载。

添加以下CSS是否解决了这个问题？

#images img {
    height: 281px;
    width: 500px;
}

我无法再次获取该错误来自行测试。

jQuery在刷新时没有正确显示

2 个答案: