Owlcarousel2: Initializing right after the DOM is ready

[dariodev]

As stated by dinhkhanh in #213, I have the same issue.

On first page visit owl-stage-outer's height is set to 1px.
If autoplay is false, height is 1px and with loading next item (by touch on dots or by autoplay) height is correct.
If autoplay is set to true, owl-stage-outer height will initially be 1px, but on first auto slide, the stage will get correct height. Same thing will happen on page refresh, height will be set correctly.
If you close browser and visit the page again, owl-stage-outer will start with1px.

Here is jsfiddle example: http://jsfiddle.net/dariodev/rWHJ4/

But please try several times, it will not happen every time, try few more times if not happens at first (close window and visit again).

Occurs in Windows 7, Browsers: Firefox 30 and Chrome 35. I can't reproduce it in IE11.

Attached screenshot with Firebug console

[witrin]

You should read the API of jQuery carefully:

In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead. — http://api.jquery.com/ready/

Obviously this is the case when you use autoheight. So I think it's up to you to choose the right point in time (e.g. load event). But the alternative would be to add the load handler to the auto height plugin for all you "lazy guys". What do you think?

[luke-robinson]

I have the same buggy behavior when autoHeight: true; with an div.owl caption.

<div class="owl-stage-outer owl-height" style="height: 16px;">

A Shift+Refresh collapses the stage every time. A demo is available at: http://www.calvin.edu/admin/luker/redesign5/structures.html

@dariodev I'd vote for relabeling issue #251 as a bug.

[luke-robinson]

@witrin You were right about jQuery's load event when initializing the plug-in. Here's my code that prevents the stage from collapsing:

<script type="text/javascript">
   $(window).load(function(){ // Prevent the stage height from collapsing: GitHub #251
     $('.owl-carousel').owlCarousel({
       items:1,
       margin:1,
       loop:true,
       autoHeight:true,
       video:true,
       nav:true,
       navText:['&#8249;','&#8250;']
     });
   });
</script>

Granted, load isn't ideal as (document).ready, but it gets us by in beta mode.

[witrin]

I'm currently missing a clean concept for the whole initialization process of the slider. Maybe you can help? Here is what I'm thinking:

We have two categories of users:

• lazy people
• control freaks

The lazy people don't care much about details and loves the "one button" solution. So they want to start at any time (mostly when the DOM is ready) and expect all working. When the slider contains images and starts at DOM ready the images might be not available. So the questions are:

• When should we update the slider?
  
  
  
  • When all images of the slider are loaded? Might be too late?
  
  
  • When the current slide is fully loaded? Might be the earliest choice in this case?
  
  
• What should we do in the meanwhile?
  
  
  
  • Adding a loading class?
  
  
  • Disallow interaction with the user?
  
  

There are also some problems:

• What if the user slides in meanwhile? Only a problem when interaction is allowed in the meanwhile.
• What about the height and width in the meanwhile? Only a problem when auto stuff is activated.
• What if the background images are used instead of img tags? I think I know the answer ;).

So and this whole bunch of questions comes with many options where the control freaks want to play with. One import thing I guess is that the solution for the lazy people should also be deactivatable. So the control freak can define when the first update starts maybe triggered by a custom handler.

[witrin]

@luke-robinson You're right some how about labeling this as a bug because a clean concept for this is missing IMO.

[witrin]

Here is another example of this problem: http://jsbin.com/wikasehi/1/

[shofer4eto]

Hi,

Has this bug been fixed?
I get a 1px height carousel even when I initialize the carousel at window.load instead of document.ready when I have the autoHeight set to true. Thanks!

[xiechao06]

I met the same problem, maybe initialize the carousel after image loaded is a temporary solution. namely:

$('img:first-child').get(0).onload = function () {
     // initialize owl carousel here
};

[Serpentsoft]

Hey guys, ImagesLoaded jQuery Plugin is very useful for this case, i test it and it's working like charm, Use it instead of window.load event

    jQuery(document).ready(function () {
        jQuery('#div_id').imagesLoaded(function () {
            jQuery('#div_id .scroll-box').owlCarousel({
                items: 1,
                nav: false,
                pagination: false,
                autoHeight: true,
                loop: true,
                lazyLoad: true,
                animateOut: 'slideOutRight',
                animateIn: 'pulse'
            });
        });
    });

[qwik3r]

Using the imagesLoaded script and document ready breaks the responsive behavior of the plugin, no errors however.

[jlikely]

I am having the same issues as above, Is there any update on this bug? The $(window).load(function(){ seems to be the best solution if you want to use auto height.

Is there any ideas as to when this might be fixed? Thanks!

[alladinUK]

I'm using version 2.0 of the carousel, also tried the beta version. Im getting the same issue but only on chrome (FF And IE11 are fine).

I experience the same behaviour as described at the top of this post, even when trying the suggested workaround of initialising at window.load instead of document.ready when I have the autoHeight set to true.

Any ideas for a workaround?

[alexandrecardinal]

@alladinUK The best workaround so far is to use @Serpentsoft's solution: wait for the images inside your carousel to load before initializing the carousel. The ImagesLoaded jquery plugin helps you do that