javascript - 逐步加载幻灯片: Some images don't load or only load partially and quit

Question

我正在使用 Slick.js 逐步加载我的图像我注意到有些图像要么部分加载，要么根本没有加载。

例如，在this site上，有两个画廊:建筑和设计(在导航中)。当用户单击任一图像时，他们会看到该图库中的图像列表。当我从一个画廊切换到另一个画廊时，就会出现问题。因此，如果我在 Architecture 中查看图像，然后单击 Design > x.jpg，新图像要么根本不加载，要么部分加载并退出.

这是一个屏幕截图。它只加载那个小条并退出。另外，每当我遇到这个问题时，似乎都会加载确切的数量。不多也不少。

下面是我用来切换画廊的内容。

$('#main').on('click','.change_gallery',function() {

    $('.side-nav').removeClass('active');
    $('.side-nav').hide(0);
    $('.side-nav').css('z-index', 1);
    var mygroup = $(this).data('group'); // gets the group name
    var position = $(this).attr('rel'); // gets the index

    if (mygroup == cgallery && (typeof cgallery != 'undefined')) {
        var position = $(this).attr('rel');
        $('.slider').slick('slickGoTo', position, false);
    } else {

        $('.slider').fadeTo(500,0, function () {         

            // Destroy previous slider
            if (typeof cgallery != 'undefined') {
                $('.slider').slick('unslick');
            }

            $('.slider').html('');
            if (mygroup=="Design") {
                $('.slider').html($("#image-containerb").html());
            } else {
                $('.slider').html($("#image-container").html());
            }

            // Load images
            $('.myslide').each(function() {

                // Add landscape and portrait classes to style accordingly
                var $this = $(this);
                var iwidth = $this.data('iwidth');
                var iheight = $this.data('iheight');

                if ($this.data('iwidth') > $this.data('iheight')) {

                    $this.addClass('landscape');

                } else {

                    $this.addClass('portrait');
                }

                var header_height = $('.site-header').height();
                var footer_height = $('.site-footer').height();
                var cheight = window.innerHeight - header_height - footer_height - (6*16);

               $this.css('height', cheight);
                $this.css('max-height', cheight);

            });

            $('.slider').fadeTo(500,1);

            var $slider = $('.slider').slick({
                fade: true,
                focusOnSelect: true,
                speed: slider_speed,
                cssEase: 'ease',
                lazyLoad: 'progressive',
                adaptiveHeight: true,
                autoplay: true,
                autoplaySpeed: 3000,
            });

            $('.slider').slick('slickGoTo',position,true);

            $slider.find('.slick-slide').on('click', function() {
                $slider.slick('slickNext');
            });

            $('.slick-prev').show();
            $('.slick-next').show();

            var header_height = $('.site-header').height();
            var landscapeH = window.innerHeight - (header_height+64+44);
            $('.portrait, .slick-slide').css('max-height', landscapeH);

            cgallery = mygroup;

        });

    } // end else
});

最初，我认为这是因为大图像需要时间来加载，所以我尝试将鼠标放在部分加载的图像条上(以防止自动播放移动到下一个图像)，但是，它只是结束了从不加载。

这可能是什么原因造成的？

Answer 1

我最终将 adaptiveHeight:true 更改为 adaptiveHeight:false，它似乎解决了这个问题。