javascript - 当我重新加载页面时在脚本之前加载图像，可能会产生 FOUC 效果

Question

我有一个带有 owlSlider 的响应式画廊，问题是当我重新加载页面并且图像在脚本之前加载时，我将脚本放在 </body> 之前标签。

我正在尝试使用延迟和异步，但这不起作用。

这是您重新加载我的页面时的结果:

这是一秒钟后的结果:

css、html和脚本的顺序是:

第一个 CSS(我尝试将所有 CSS 放在第一个，但没有成功):

   /* Owl Carousel */
  .owl-carousel .owl-wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
   }
   ....

其次是 HTML:

<div class="product-detail">
    <div class="col-sm-5" style="overflow: hidden;">

        <!-- GALLERY -->
        <div id="responsive_gallery">
            @if($product_info->total_images > 0)
                <!-- VARIAS FOTOS -->       
                @for ($i=1; $i <= $product_info->total_images; $i++)
                    <div><img alt="{{$product_info->name}}" src="{{ FotImg::art($id,'g',$i) }}"></div>
                @endfor
            @else
                <div><img alt="{{$product_info->name}}" src="{{ FotImg::art($id,'g') }}"></div>
            @endif
        </div>

        <!-- GALLERY THUMBNAILS -->
        <div id="gallery_thumbnails">
            @if($product_info->total_images > 0)
                <!-- VARIAS FOTOS -->       
                @for ($i=1; $i <= $product_info->total_images; $i++)
                    <div class="item"><img alt="{{$product_info->name}}" src="{{ FotImg::art($id,'p',$i) }}"></div>
                @endfor
            @else
                <div class="item"><img alt="{{$product_info->name}}" src="{{ FotImg::art($id,'P') }}"></div>
            @endif
        </div>
    </div>
    <div class="col-sm-5 col-offset-1">
        <div class="right">
            <h1>{!! $product_info->name !!}</h1>
            <div class="product-id">{{ $product_info->article_id }}</div>

        </div>
    </div>
</div>

最后<script> :

<script type="text/javascript" src="{{ FotImg::asset('js/jquery.min.js') }}?dts={DPL_TS}"></script>
<script type="text/javascript" src="{{ FotImg::asset('js/bootstrap.min.js') }}?dts={DPL_TS}"></script>
<!-- owlCarousle Scripts start here -->
<script defer src="{{ FotImg::asset('js/owl.carousel.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() 
{

    var responsive_gallery = $('#responsive_gallery');
    var gallery_thumbnails = $('#gallery_thumbnails');

    responsive_gallery.owlCarousel({
         singleItem : true,
        slideSpeed : 1000,
        navigation: true,
        pagination:false,
        afterAction : syncPosition,
        responsiveRefreshRate : 200,
        navigationText: ["anterior","siguiente"]
     });

     gallery_thumbnails.owlCarousel({
        items : 4,
        itemsDesktop      : [1199,10],
        itemsDesktopSmall     : [979,10],
        itemsTablet       : [768,8],
        itemsMobile       : [479,4],
        pagination:false,
        responsiveRefreshRate : 100,
        afterInit : function(el){
          el.find(".owl-item").eq(0).addClass("synced");
        }
    });

     function syncPosition(el){
    var current = this.currentItem;
    $("#gallery_thumbnails")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#gallery_thumbnails").data("owlCarousel") !== undefined){
      center(current)
    }
  }

  $("#gallery_thumbnails").on("click", ".owl-item", function(e){
    e.preventDefault();
    var number = $(this).data("owlItem");
    responsive_gallery.trigger("owl.goTo",number);
  });

  function center(number){
        var sync2visible = gallery_thumbnails.data("owlCarousel").owl.visibleItems;
        var num = number;
        var found = false;
        for(var i in sync2visible){
          if(num === sync2visible[i]){
            var found = true;
          }
        }

        if(found===false){
          if(num>sync2visible[sync2visible.length-1]){
            gallery_thumbnails.trigger("owl.goTo", num - sync2visible.length+2)
          }else{
            if(num - 1 === -1){
              num = 0;
            }
            gallery_thumbnails.trigger("owl.goTo", num);
          }
        } else if(num === sync2visible[sync2visible.length-1]){
          gallery_thumbnails.trigger("owl.goTo", sync2visible[1])
        } else if(num === sync2visible[0]){
          gallery_thumbnails.trigger("owl.goTo", num-1)
        }
  }

});

</script>

如何解决这个问题？

Answer 1

我找到了这个黑客解决方案:

#responsive_gallery, #gallery_thumbnails {
display:none;
}

在 OwlCarousel 脚本将此元素设置为 display:block; 后。