[FIX] website: recompute carousel item heights on image loading

Some code is in charge of setting the same min-height for all items of
a carousel to the natural height of the tallest item, once the page is
loaded. This code was not working correctly in the case the natural
height of this tallest item depends on the height of one of its inner
image, as we have to wait for the image to be loaded in that case.

closes odoo/odoo#28159

addons/website/static/src/js/content/snippets.animation.js

@@ -435,6 +435,7 @@ registry.slider = Animation.extend({
      */
     start: function () {
         if (!this.editableMode) {
+            this.$('img').on('load.slider', this._onImageLoaded.bind(this));
             this._computeHeights();
         }
         this.$target.carousel();
@@ -445,6 +446,7 @@ registry.slider = Animation.extend({
      */
     destroy: function () {
         this._super.apply(this, arguments);
+        this.$('img').off('.slider');
         this.$target.carousel('pause');
         this.$target.removeData('bs.carousel');
         _.each(this.$('.carousel-item'), function (el) {
@@ -487,6 +489,12 @@ registry.slider = Animation.extend({
     _onEditionSlide: function () {
         this._computeHeights();
     },
+    /**
+     * @private
+     */
+    _onImageLoaded: function () {
+        this._computeHeights();
+    },
 });
 
 registry.parallax = Animation.extend({