jquery - How to show a background picture till Owl Carousel loads it's images -

i using owlcarousel v1.3.3 in old project. shows white slides (without images) when page loaded first time. (seems images bit bigger in size/resolution cannot make them smaller need high res pictures.

my question is, possible show static background image of smaller size /resolution till other images loaded in owl carousel.

thanks.

edit: please find code below.

    // javascript code below      //=================================================================================        	    $("#main-slider").find('.owl-carousel').owlcarousel({      	      slidespeed : 500,      	      paginationspeed : 500,      	      singleitem : true,      	      navigation : true,      		  autoplayhoverpause:false,      			navigationtext: [      			"<i class='fa fa-angle-left'></i>",      			"<i class='fa fa-angle-right'></i>"      			],      	      afterinit : progressbar,      	      aftermove : moved,      	      startdragging : pauseondragging,      	      //autoheight : true,      	      transitionstyle : "fadeup"      	    });

    /*      css code below      ============================================================================================================        */            #main-slider {        overflow: hidden;      }        #main-slider .item {        height: 558px;        background-repeat: no-repeat;        background-position: 50% 0;        background-size: cover;      }      #main-slider .slider-inner {        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        color: #fff;      }      #main-slider .slider-inner h2 {        margin-top: 180px;        font-size: 26px;        line-height: 1;        text-transform: none;        color: black;      }      #main-slider .slider-inner h2 > span {        color: #45aed6;        font-size: 34px;        text-transform: uppercase;              }      #main-slider .slider-inner .btn {        margin-top: 10px;      }      #main-slider .owl-prev,      #main-slider .owl-next {        position: absolute;        top: 50%;        background-color: rgba(0, 0, 0, 0.2);        color: #fff;        font-size: 30px;        display: inline-block;        margin-top: -20px;        height: 40px;        width: 40px;        line-height: 40px;        text-align: center;        border-radius: 50px;        z-index: 5;        -webkit-transition: background-color 400ms;        transition: background-color 400ms;      }      #main-slider .owl-prev:hover,      #main-slider .owl-next:hover {        background-color: #4b4d4e;      }      #main-slider .owl-prev {        left: -20px;        text-indent: 0px;      }      #main-slider .owl-next {        right: -20px;        text-indent: -0px;      }        #main-slider  .slide-caption      {      	background-color:#e0dfdf;      	border-radius:5px;      	padding:5px;      }        #main-slider  .carousel-content      {      	padding:20px;      }

    <!-- html code below -->      <!-- ===================================================================================== -->         <div class="owl-carousel">                  <div class="item" style="background-image: url(images/slider/bg1.png);">                      <div class="slider-inner">                          <div class="container">                              <div class="row">                                  <div class="col-sm-6">                                      <div class="carousel-content">                                          <h2 style="margin-top:270px;" class="slide-caption"><span>some text</span><br>some text</h2>                                          <p style="color:white;">some text</p>                                          <a class="btn btn-primary btn-lg" href="#">read more</a>                                      </div>                                  </div>                              </div>                          </div>                      </div>                  </div><!--/.item-->                    <div class="item" style="background-image: url(images/slider/bg2.png);">                      <div class="slider-inner">                          <div class="container">                              <div class="row">                                  <div class="col-sm-6">                                      <div class="carousel-content">                                          <h2 style="margin-top:260px;" class="slide-caption"><span>some text</span><br>some text</h2>                                          <p style="color:white;">some text</p>                                          <a class="btn btn-primary btn-lg" href="#">read more</a>                                      </div>                                  </div>                              </div>                          </div>                      </div>                  </div><!--/.item-->      </div>

<!-- html code below --> <!-- ===================================================================================== -->   <div class="owl-carousel">             <div class="item" style="background-image: url(images/slider/bg1.png);">                 <div class="slider-inner">                     <div class="container">                         <div class="row">                             <div class="col-sm-6">                                 <div class="carousel-content">                                     <h2 style="margin-top:270px;" class="slide-caption"><span>some text</span><br>some text</h2>                                     <p style="color:white;">some text</p>                                     <a class="btn btn-primary btn-lg" href="#">read more</a>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div><!--/.item-->              <div class="item" style="background-image: url(images/slider/bg2.png);">                 <div class="slider-inner">                     <div class="container">                         <div class="row">                             <div class="col-sm-6">                                 <div class="carousel-content">                                     <h2 style="margin-top:260px;" class="slide-caption"><span>some text</span><br>some text</h2>                                     <p style="color:white;">some text</p>                                     <a class="btn btn-primary btn-lg" href="#">read more</a>                                 </div>                             </div>                         </div>                     </div>                 </div>             </div><!--/.item--> </div>