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

我有一个带有owlsloider的响应库，问题是当我重新加载页面并在脚本之前加载图像时，我将脚本放在

标记之前

我正在尝试使用defer和async，但这不起作用

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

这是一秒钟后的结果：

css、html和脚本的顺序为：

第一个CSS（我尝试将所有CSS放在第一位，但没有成功）：

其次是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>

@如果（$product\U info->total\U images>0）
@对于（$i=1；$i总计\u个图像；$i++）
@结束
@否则
@恩迪夫
@如果（$product\U info->total\U images>0）
@对于（$i=1；$i总计\u个图像；$i++）
@结束
@否则
@恩迪夫
{！！$product\u info->name！！}
{{$product\u info->article\u id}

最后是

：

$（文档）.ready（函数（）
{
var responsive_gallery=$（“#responsive_gallery”）；
var gallery_缩略图=$（“#gallery_缩略图”）；
猫头鹰旋转木马({
单项：对，
幻灯片速度：1000，
导航：对，
分页：false，
后遗症：同步定位，
响应速度：200，
导航文本：[“前”、“符号”]
});
图库_缩略图.owlCarousel({
项目：4，
itemsDesktop:[1199,10]，
itemsDesktopSmall:[979,10]，
itemsTablet:[768,8]，
itemsMobile:[479,4]，
分页：false，
响应速度：100，
afterInit：函数（el）{
el.find（“.owl项”）.eq（0）.addClass（“已同步”）；
}
});
功能同步位置（el）{
var current=此.currentItem；
$（“图库缩略图”）
.find（“.owl项”）
.removeClass（“已同步”）
.eq（电流）
.addClass（“已同步”）
if（$（“#图库#缩略图”）.data（“owlCarousel”）！==未定义）{
中心（当前）
}
}
$（“#图库(U缩略图”）。在（“单击”，“猫头鹰项目”，函数（e）{
e、 预防默认值（）；
变量编号=$（此）.data（“owleItem”）；
响应的_gallery.trigger（“owl.goTo”，数字）；
});
功能中心（编号）{
var sync2visible=gallery_thumbnails.data（“owlCarousel”）.owl.visibleItems；
var num=数字；
var=false；
用于（sync2visible中的var i）{
如果（num==sync2visible[i]）{
var发现=真；
}
}
如果（找到===false）{
如果（num>sync2visible[sync2visible.length-1]）{
gallery_缩略图。触发器（“owl.goTo”，num-sync2visible.length+2）
}否则{
如果（num-1==-1）{
num=0；
}
图库缩略图触发（“owl.goTo”，num）；
}
}else if（num==sync2visible[sync2visible.length-1]）{
gallery_缩略图.触发器（“owl.goTo”，sync2visible[1]）
}else if（num==sync2visible[0]）{
图库缩略图。触发器（“猫头鹰。转到”，num-1）
}
}
});

---

我如何修复此问题？

我发现此黑客解决方案：

#responsive_gallery, #gallery_thumbnails {
display:none;
}

---

OwlCarousel脚本将此元素设置为显示：块后

我发现这个黑客解决方案：

#responsive_gallery, #gallery_thumbnails {
display:none;
}

---

OwlCarousel脚本将此元素设置为显示：块后

尝试使用

窗口。加载

而不是

文档就绪

不起作用，结果是您可以使用

。加载

尝试使用

窗口。加载

而不是

文档就绪

不起作用，结果是您可以使用

。加载

#responsive_gallery, #gallery_thumbnails {
display:none;
}