Question

我已经对此进行了相当广泛的搜索，但没有找到明确的答案，所以希望有人可以帮助解释一下。

当猫头鹰旋转木马加载时，它不知道高度，所以当插件读取图像的大小时，框闪烁然后弹出到图像的大小。

为了帮助解决这个问题，我最初尝试添加一些样式的.owl-loading，但无论我做什么，我的样式都没有在那里应用，说实话我甚至看不到它出现在页面上负荷。

为了解决这个问题，我尝试添加自己的自定义＆＃39; loading＆＃39; class然后使用onInitialized回调，如下所示：

onInitialized: function() {
    $('.loading').removeClass('loading');
}

这种作品，但它起得太早了。所以我可以看到我的加载类，然后插入initalises然后移除我的类，旋转木马在大小上折叠然后在图像加载时重新出现。

我想要做的只是在加载图像后删除该类，但似乎没有回调。还有什么进一步的想法吗？

Answer 1

我做了类似的事情，但我使用lazySizes来延迟活动图像。在lazySizes完成加载所有活动图像后，你可以设置一个回调来删除加载div，但没有它就可以正常工作。

 /**
 * Initialize the carousel. On initialized, hide the spinner and lazyload the images for the active carousel items
 * @param settings
 */
ImageCarousel.prototype.setupOwl = function(settings) {

    var self = this;
    this.owlCarousel = this.el.find('.owl-carousel').on({

        'initialized.owl.carousel': function () {

            self.lazyloadActive();      //lazyload the active carousel items
            self.el.find('#image-carousel__loading').hide();

        }

    }).owlCarousel(settings);

    this.bindEvents();
};

/**
 *  Find the images of the active owl items and add "lazyload" class to load them
 */
ImageCarousel.prototype.lazyloadActive = function() {
    var images = this.el.find('.owl-item.active .image-carousel__image');
    $(images).addClass("lazyload");
};

猫头鹰Carousel 2装载类问题

1 个答案: