javascript - Bootstrap carousel should Fire event on load and slide -

i have function checks colour of image, if dark/light adds class header.

• i want have function running inside mycaruosel bootstrap.
• the getimagebrightness should fired each image.

i can't working inside carousel function.

any appreciated.

http://jsfiddle.net/s7wx2/115/

use find event active image src instead of using 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 , trigger 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