Bootstrap carousel应该在加载和滑动时触发事件

Question

我有一个功能可以检查图像的颜色，如果黑暗/光线为标题添加了一个类。

• 我希望在myCaruosel Bootstrap内运行此功能。
• 应为每张图片触发getImageBrightness。

我无法在旋转木马功能中使用它。

任何帮助都非常感激。

http://jsfiddle.net/s7Wx2/115/

Answer 1

使用find事件获取活动图像src而不是使用this.src：

$(document).ready(function() {
var imgs = document.body.getElementsByTagName('img');

///Load  getImageBrightness function

$("img").on("load", function() {

  getImageBrightness(this.src, function(brightness) {
    if (brightness < 256 / 2) {
      $('header').addClass('dark');
    } else {
      $('header').addClass('light');
    }
  });

}).each(function() {
  if (this.complete) $(this).load();
});

var img_src = $('#MyCarousel').find('.carousel-item.active img').attr('src');
     getImageBrightness(img_src, function(brightness) {
     console.log(brightness);
    if (brightness < parseInt(256 / 2)) {
      $('header').toggleClass('dark');
    } else {
      $('header').toggleClass('light');
    }
  });
///Load carousel and trigger the getImageBrightness Function here
 $('#MyCarousel').on('slide.bs.carousel', function () {
var img_src = $('#MyCarousel').find('.carousel-item.active img').attr('src');
     getImageBrightness(img_src, function(brightness) {
     console.log(brightness);
    if (brightness < parseInt(256 / 2)) {
        $('header').removeClass('light');
      $('header').addClass('dark');
    } else {
        $('header').removeClass('dark');
      $('header').addClass('light');
    }
  });
 }).each(function() {
  if (this.complete) $(this).load();
});

}）;

Fiddle