jQuery元素样式不适用于Safari
jQuery元素样式不适用于Safari
提问于 2018-11-16 09:17:13
我在HTML中创建了一个引导旋转木马滑块。在加载和重新加载页面时，加载旋转木马图像需要一秒钟时间，同时所有的图像边框和旋转木马指示符都在那里。然后，我创建了一个代码，用于不可见的所有边界和旋转木马元素，直到加载图像。这在Chrome、Firefox、IE、Edge和Opera中运行得很好，但在Safari中却不起作用。
$(".carousel-img").on('load', function() {
$(".carousel-indicators").css({
display: "-webkit-flex",
display: "-webkit-box",
display: "-moz-flex",
display: "-moz-box",
display: "-ms-flexbox",
display: "flex",
"flex-direction": "row"
});
}).attr("src", $(".carousel-img").attr("src"));.carousel-indicators {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="https://dummyimage.com/100x50/00f/ff0" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src="https://dummyimage.com/100x50/0f0/f0f" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src="https://dummyimage.com/100x50/f00/0ff" alt="..."></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://dummyimage.com/100x50/00f/ff0" alt="..." class="carousel-img">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/0f0/f0f" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/f00/0ff" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
在狩猎活动中，这个旋转木马的指示器根本没有显示出来。其他浏览器都在正确地显示它。怎么修呢？
Stack Overflow用户
回答已采纳
发布于 2018-11-16 10:29:48
这是我的解决办法：
- 我在函数中移动了一些代码
- 我把CSS从JS移到CSS
- 我检查加载事件以及每个img的完整状态。
- 如果完成或加载，则从队列中移除该映像。
- 如果队列为空，则显示指示符
console.clear()
jQuery(function($) {
var $queue = $(".carousel-img")
var total = $queue.length;
$queue
.each(checkLoaded)
$queue
.on('load', onloadImage)
function checkShowIndicators() {
if ($queue.length === 0) {
$(".carousel-indicators").addClass('after-load')
}
}
function onloadImage() {
console.info('loaded: ' + $(this).attr('src'))
$queue = $queue.not(this)
checkShowIndicators();
}
function checkLoaded() {
if ($(this).get(0).complete) {
console.info('complete: ' + $(this).attr('src'))
$queue = $queue.not(this)
checkShowIndicators();
}
}
});.carousel-indicators{
display: none;
}
.carousel-indicators.after-load {
display:-webkit-flex;
display:-webkit-box;
display:-moz-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-direction: row;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="https://dummyimage.com/100x50/00f/ff0" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src="https://dummyimage.com/100x50/0f0/f0f" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src="https://dummyimage.com/100x50/f00/0ff" alt="..."></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://dummyimage.com/100x50/00f/ff0" alt="..." class="carousel-img">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/0f0/f0f" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/f00/0ff" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53334734
复制相关文章
相似问题
腾讯云开发者
