HTML - 图像未加载/刷新页面后未显示

Question

我尝试制作一个背景滑块，它在 localfile 上工作（使用浏览器打开 Html 文件）。然后我使用 xampp 在本地主机上尝试。在第一次加载时，一切正常，直到我尝试刷新页面。 IMG 滑块变为灰色。奇怪的是，当我使用 CTRL + 或 CTRL - 更改浏览器（chrome）上的页面大小时，图像重新出现。并再次正常工作。我认为问题出在我的浏览器中。但是我已经尝试过另一种浏览器，例如firefox和edge，即使在手机上使用brower，都显示出同样的问题。这是我的代码

html

<div id="bg-slider">
   <div>
      <div class="img-holder" style="background-image: url(images/slider1.jpg);"></div>
   </div>
   <div>
      <div class="img-holder" style="background-image: url(images/slider2.jpg);"></div>
   </div>
   <div>
      <div class="img-holder" style="background-image: url(images/slider3.jpg);"></div>
   </div>
 </div>

javascript

if ($('#bg-slider').length && $.fn.slick) {
    
    $('#bg-slider').slick({
        arrows: false,
        autoplay: true,
        fade: true,
        dots: true,
        appendDots: $('.wrapper'),
        speed: 1000,
        autoplaySpeed: 5000
    });
    

    $(window).on('load', function() {
        $('.slick-slide .img-holder').height($(window).height());
    });

    $(window).on('resize', function() {
        $('.slick-slide .img-holder').height($(window).height());
    });
    

}

Answer 1

我有同样的问题，我用过：

$(document).ready(function() {        
     $('.slick-slide .img-holder').height($(window).height());
});

而不是：

$(window).on('load', function() {
    $('.slick-slide .img-holder').height($(window).height());
});

它成功了！