How to make BxSlider hide all slides until the page loads

how-make-bxslider-hide-all-slides-until-page-loads.css

.bxslider-wrap { visibility: hidden; }

how-make-bxslider-hide-all-slides-until-page-loads.html

<div class="bxslider-wrap">
    <ul class="bxslider">
        <li>Image / Content</li>
        <li>Image / Content</li>
        <li>Image / Content</li>
    </ul>
</div>

how-make-bxslider-hide-all-slides-until-page-loads.js

jQuery(document).ready(function($) {
    $('.bxslider').bxSlider({
        onSliderLoad: function(){
            $(".bxslider-wrap").css("visibility", "visible");
        }
    });
});