如何解决HTML - 图像未加载/刷新页面后不显示
我尝试制作一个背景滑块,它在 localfile 上工作(使用浏览器打开 Html 文件)。然后我使用 xampp 在本地主机上尝试。在第一次加载时,一切正常,直到我尝试刷新页面。 IMG 滑块变为灰色。奇怪的部分是当我使用 CTRL + 或 CTRL - 在浏览器(chrome)上更改页面大小时,图像重新出现。并再次正常工作。我认为是我浏览器的问题。但我已经尝试了另一种浏览器,如 Firefox 和 Edge,即使在手机上使用浏览器,也都出现了同样的问题。所以这是我的代码
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());
});
}
解决方法
我遇到了同样的问题,我用过:
$(document).ready(function() {
$('.slick-slide .img-holder').height($(window).height());
});
而不是:
$(window).on('load',function() {
$('.slick-slide .img-holder').height($(window).height());
});
它奏效了!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。