I've searched quite widely about this but can find no definitive answer, so hoping somebody can help shed some light on this.
我对此进行了广泛的搜索,但没有找到明确的答案,所以希望有人可以帮助解释一下。
When an owl carousel loads, it doesn't know the height, so the boxes flicker and then pop to the size of the image as the plugin reads the size of the images.
当猫头鹰旋转木马加载时,它不知道高度,因此当插件读取图像的大小时,框闪烁然后弹出到图像的大小。
To help get around this I originally tried adding some styles of .owl-loading, but no matter what I do none of my styles are applied there, and to be honest I can't even see it appearing on page load.
为了解决这个问题,我最初尝试添加一些样式的.owl-loading,但无论我做什么都没有我的样式应用于那里,说实话我甚至看不到它出现在页面加载。
In an attempt to get around this I tried adding my own custom 'loading' class and then use the onInitialized callback like this:
为了解决这个问题,我尝试添加自己的自定义“加载”类,然后使用onInitialized回调,如下所示:
onInitialized: function() {
$('.loading').removeClass('loading');
}
That kind of works, but it fires too early. So I can see my loading class then, plugin initalises then remove my class, the carousel collapses in size then reappears as the images are loaded.
那种作品,但它起得太早了。所以我可以看到我的加载类,然后插入initalises然后删除我的类,旋转木马在大小上折叠然后在图像加载时重新出现。
What I would like to do is only have that class removed AFTER the images are loaded, but there doesn't appear to be a callback for that. Any further ideas here?
我想要做的只是在加载图像后删除该类,但似乎没有回调。还有什么想法吗?
1 个解决方案
#1
2
I do something similar, but I use lazySizes to lazyload the active images. You can setup a callback to remove the loading div after lazySizes finishes loading all the active images, but it works fine for me without it.
我做了类似的事情,但我使用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");
};
#1
2
I do something similar, but I use lazySizes to lazyload the active images. You can setup a callback to remove the loading div after lazySizes finishes loading all the active images, but it works fine for me without it.
我做了类似的事情,但我使用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");
};