Question

我在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>

在野生动物园中，该轮播指标完全没有显示。所有其他浏览器都正确显示它。如何解决？

Answer 1

如果您尝试添加行display:"-webkit-flexbox",

$(".carousel-img")
    .on('load', function() {
        $(".carousel-indicators").css({ display:"-webkit-flex",
                                        display:"-webkit-box",
                                        display:"-webkit-flexbox",
                                        display:"-moz-flex",
                                        display:"-moz-box",
                                        display:"-ms-flexbox",
                                        display:"flex",
                                        "flex-direction":"row"
                                        });
    })
    .attr("src", $(".carousel-img").attr("src"));

Answer 2

请尝试看起来像

$(".carousel-img")
.on('load', function() {
    $(".carousel-indicators").css({ display:"-webkit-flex",
                                    display:"-webkit-box",
                                    display:"-moz-flex",
                                    display:"-moz-box",
                                    display:"-ms-flexbox",
                                    display:"-webkit-flexbox",
                                    display:"flex",
                                    "flex-direction":"row"
                                    });
})
.attr("src", $(".carousel-img").attr("src"));

Answer 3

这是我的解决方案：

我在函数中移动了一些代码
我将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>

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

3 个答案: