Fullpage.js图像在部分加载后淡入

Question

我正在尝试在加载部分后使img淡入效果（类似https://codepen.io/anon/pen/aNGdvr，但部分而不是幻灯片）。我在整页的第3部分中设置了img display：none，然后尝试使用后加载，但它不起作用。我不太擅长编码，请任何人可以帮助我吗？非常感谢！

//fullpage.js//
new fullpage('#enlabs', {
  anchors: ['page1', 'page2', 'page3'],
  sectionsColor: ['white', '#f0dd03', '#FFF'],
  autoScrolling:true,
  css3:true,
  lazyLoading: true,
  scrollOverflow: false,
  licenseKey: 'C1599FD0-FAEF44AD-B21B7C8B-4D21D8FB',
  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

您应该使用可以从the Github repository获得的最新fullPage.js版本3。注意，您需要可以从fullpage.js pricing page获得的许可证。

然后您可以使用the fullpage.js documentation中详细说明的afterLoad回调>

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");
        }
    }
});
Example online