Question

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

例如，在this site上，有两个图库：架构和设计（在导航中）。当用户点击其中任何一个时，会向他们显示该图库中的图像列表。当我从一个画廊切换到另一个画廊时，会出现问题。因此，如果我查看Architecture中的图片并点击Design > x.jpg，新图片将无法加载或部分加载并退出。

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

enter image description here

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

$('#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，似乎可以解决此问题。

Answer 2

如果首先加载哪个图像并不重要，您可以

$('#yourclass').slick('slickGoTo', 2);

它将跳转到下一张图像，该图像将被正确加载。

逐步加载幻灯片：某些图像无法加载或仅部分加载并退出

2 个答案: