Question

我正在使用Barba.js和layzload，我有一个很大的问题。当页面改变时，我的动画工作，但新页面上的图像没有加载（没有错误信息），你可以在下面的截图中看到（法文页面，但图像在底部）。如果我刷新页面，图像会被加载，所以问题是“如何在页面更改时加载图像？”

Screenshot : Images are not loaded

我在index.html上的代码：

<body id="body-home" >
    <div id="barba-wrapper">
        <div class="barba-container" data-namespace="homepage">
           [some basic stuff]
            // My link to a project
            <a href="pirates-des-caraibes.html">
        </div>
    </div>
</body>

我在项目上的代码（图片无法加载）：

<body id="body-projet" class="project">
    <div id="barba-wrapper">
        <div class="barba-container" data-namespace="projet">

            <img data-original="assets/images/pirates/mockup_pirates_home.jpg" alt="" class="lazy" />
             <img data-original="assets/images/pirates/mockup_pirates_lots.jpg" alt="" class="lazy" />

        </div>
    </div>
</body>

我的barba脚本：

var pageTransition = function () {

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

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

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

            $(this.oldContainer).hide();
            document.body.scrollTop = 0;

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

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

    var Homepage = Barba.BaseView.extend({
        namespace: 'homepage',
        onEnter: function() {
        },
        onEnterCompleted: function() {
        },
        onLeave: function() {
        },
        onLeaveCompleted: function() {
        }
    });

    Homepage.init();

    var Projets = Barba.BaseView.extend({
        namespace: 'projet',
        onEnter: function() {
        },
        onEnterCompleted: function() {
            // Some animations when the page load
            $('.overlay-header').addClass('active');
            setTimeout(function(){
                $('.container-header').fadeIn();
            }, 500);

            //col-1
            setTimeout(function(){
                $('.col-1>.overlay-col').addClass('active');
            }, 700);

            setTimeout(function(){
                $('.col-1>h4').css('opacity', '1');
                $('.col-1>p').css('opacity', '1');
            }, 800);

            //col-2
            setTimeout(function(){
                $('.col-2>.overlay-col').addClass('active');
            }, 1100);

            setTimeout(function(){
                $('.col-2>h4').css('opacity', '1');
                $('.col-2 li').css('opacity', '1');
            }, 1200);

            //col-3
            setTimeout(function(){
                $('.col-3>.overlay-col').addClass('active');
            }, 1500);

            setTimeout(function(){
                $('.col-3>h4').css('opacity', '1');
                $('.col-3 li').css('opacity', '1');
            }, 1600);
        },
        onLeave: function() {
        },
        onLeaveCompleted: function() {
        }
    });

    Projets.init();

    Barba.Pjax.getTransition = function () {
        return FadeTransition;
    };

    Barba.Pjax.start();
};

var run = function () {
    pageTransition();
};

run();

你能帮助我吗？

Barba.js没有加载img

0 个答案: