javascript - jQuery 元素样式在 Safari 中不起作用

Question

我在我的 HTML 中创建了一个引导轮播 slider 。加载和重新加载页面时，加载轮播图像需要一秒钟，同时所有图像边框和轮播指示器都在那里。然后我创建了一个代码来隐藏轮播的所有边框和元素，直到加载图像。这在 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>

在 safari 中，此轮播指示器根本不显示。所有其他浏览器都正确显示它。如何解决？

Answer 1

这是我的解决方案:

1. 我在函数中移动了一些代码
2. 我将 CSS 从 JS 移到了 CSS
3. 我检查加载事件以及每个 img 的完整状态
4. 如果完成或已加载，我会从队列中删除该图像
5. 如果队列为空，则显示指标

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>