Изображение Fullpage.js исчезает после загрузки раздела

Question

Я пытаюсь получить эффект img fadein после загрузки раздела (что-то вроде этого https://codepen.io/anon/pen/aNGdvr, но с разделом вместо слайдов). Я установил img display: ничего в 3-м разделе моей полной страницы, затем я попытался использовать постнагрузку, но она не работает. Я не очень хорошо разбираюсь в кодировании, кто-нибудь может мне помочь? Большое спасибо!

//fullpage.js//
new fullpage('#enlabs', {
  anchors: ['page1', 'page2', 'page3'],
  sectionsColor: ['white', '#f0dd03', '#FFF'],
  autoScrolling:true,
  css3:true,
  lazyLoading: true,
  scrollOverflow: false,
  lockAnchors: true,
  verticalCentered: true,
  
      afterLoad: function(anchorLink, index, slideAnchor, slideIndex){
      var loadedSlide = $(this).find('img');
      loadedSlide.fadeIn();
    },

});

/* stile div fullscreen */
.fullscreen {
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
   width: 100%;
   display:block;
}

/* stile immagine fullscreen */
.fullscreen img {
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
   width: 100%;
   height: 100%;
   object-fit: cover;
}


/* stile div con padding */
.border {
  -webkit-transform: translate3d(0,0,0);
  margin: 135px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  vertical-align: middle;
  min-height: calc(100vh - (135px*2));
  max-height: calc(100vh - (135px*2));
}

/* stile immagine con padding */
-webkit-backface-visibility: hidden;
.border img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

<!-- inizio fullpage --> 
<div id="enlabs">
  
  
  <!-- inizio sezione 1 -->
<div class="section">
         <div class="slide fullscreen"> 
		 <picture>
 		 <source media="(orientation:portrait)" data-srcset="https://www.spazio.studio/wp-content/uploads/2019/enlabs/ENL_01_vert_low.jpg">
  <img data-src="https://www.spazio.studio/wp-content/uploads/2019/img_nuove/enlabs/ENL_02.jpg" data-sizes="auto">
</picture>
        </div>
</div>
<!-- fine sezione 1 --> 
  
  
  
<!-- inizio sezione 2 --> 
   <div class="section testo">LUISS EnLabs è un acceleratore che offre agli studenti universitari la possibilità di trasformare la propria startup digitale in una realtà imprenditoriale mettendo a disposizione un finanziamento iniziale, una prestigiosa location al centro di Roma e l’esperienza di imprenditori e manager di successo che operano come tutor.
	   </div>
<!-- fine sezione 2 --> 
   
  
  <!-- inizio sezione 3 -->
<div class="section">
         <div class="slide fullscreen"> 
		 <picture>
 		 <source media="(orientation:portrait)" data-srcset="https://www.spazio.studio/wp-content/uploads/2019/enlabs/ENL_02_vert.gif">
  <img data-src="https://www.spazio.studio/wp-content/uploads/2019/enlabs/ENL_02.gif" data-sizes="auto"  style="display:none">
</picture>
        </div>
</div>
<!-- fine sezione 3 --> 
  

 

<script src='https://www.spazio.studio/wp-content/uploads/jquery-3.2.1.js'></script>

<link rel="stylesheet" type="text/css" href="https://www.spazio.studio/wp-content/uploads/fullpage.css" />

<script src='https://www.spazio.studio/wp-content/uploads/jquery.easing.min.js'></script>

<script src='https://www.spazio.studio/wp-content/uploads/fullpage.js'></script>

Answer 1

Спасибо за вашу помощь! У меня есть еще два вопроса :). Прежде всего, я не могу понять, как обновить полную страницу (моя вина). Во-вторых, я использовал постнагрузку, но она не работает.

  afterLoad: function(anchorLink, index, slideAnchor, slideIndex){
  var loadedSlide = $(this).find('img');
  loadedSlide.fadeIn();
},

Я попробовал вставленный вами код постзагрузки, и он работает хорошо, поэтому я думаю, что проблема в моем коде. Можете ли вы дать мне более конкретную помощь? Я очень очень простой кодер.

Еще раз спасибо!

Answer 2

Вы должны использовать последнюю версию fullPage.js 3, которую вы можете получить из репозитория Github . Обратите внимание, что вам понадобится лицензия, которую вы можете получить на странице цен fullpage.js .

Затем вы можете использовать обратный вызов afterLoad, как описано в документации fullpage.js

new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(origin, destination, direction){
        var loadedSection = this;

        //using index
        if(origin.index == 2){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(origin.anchor == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

Пример онлайн