Owl Carousel loading issue when within the WordPress loop

I am currently displaying 12 random products from WooCommerce, using the owl carousel slider, when the page loads there seems to be a delay before owl calculates everything resulting in a “springboarding” type effect.

I have done some testing in relation to using a generic owl carousel, with static content and it renders fine on page load, but with the introduction to pulling data from a WordPress loop this is where the issues lies!

Same http://preview.meeko.me/product/navy-floral-print-pleat-skater-dress/

This is the owl-carousel call:

var meekoRelated = $('#relatedSlider');
meekoRelated.owlCarousel({
    lazyLoad: true,
    loop: true,
    margin: 10,
    nav: true,
    responsiveClass:true,
    responsive:{
        0:{
            items: 2
        },              
        640:{
            items: 4
        },
        1000:{
            items: 5
        }
    }
}); 

My loop into Woocommerce

            <div id="relatedSlider" class="owl-caroucel">

             <?php
             $args = array( 
             'post_type' => 'product', 
             'orderby' => 'rand',
             'posts_per_page' => 12 
             );
             $loop = new WP_Query( $args );
             while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <div class="categoryarchivegrid">    

                    <?php wc_get_template_part( 'content', 'rec' ); ?>

                </div>

             <?php endwhile; ?>
             <?php wp_reset_query(); ?>

            </div>

Any help will be greatly appreciated!