1

Everything works fine. I have a simple Fade-In/Fade-Out Transition, but the pictures are not loaded when the page fade in. This destroy the complete experience. Any Idea how i can solve this?

Barba.Pjax.start();
Barba.Prefetch.init();


var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
    Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {
    return $(this.oldContainer).animate({ opacity: 0 }).promise();
  },

  fadeIn: function() {
    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $el.animate({ opacity: 1 }, 400, function() {
      _this.done();
    });
  }
});

Barba.Pjax.getTransition = function() {
  return FadeTransition;
};
Nikhil Kinkar
  • 761
  • 8
  • 31
Antonio
  • 39
  • 1
  • 3
  • Since you are using jquery, check out this post https://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin – Fawaz Oct 04 '18 at 09:41
  • I need a Solution for Barba.js - this dont help – Antonio Oct 04 '18 at 14:00

0 Answers0