渐进式加载幻灯片：某些图像不加载或仅部分加载并退出

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，它似乎可以解决问题。

Answer 2

如果先加载哪个图像无关紧要，您可以

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

它会跳转到下一张可以正常加载的图片。

渐进式加载幻灯片：某些图像不加载或仅部分加载并退出

Progressively loading slide: Some images don't load or only load partially and quit

javascript

jquery

lazy-loading

image

slideshow