Сделать бесконечную прокрутку работающей с внешним вызовом cdn в голове

моя бесконечная прокрутка работает, но я заметил некоторые ошибки.Когда страница загружается до вызова бесконечной прокрутки все работает нормально, но после вызова бесконечной прокрутки фоторама не работает.Первое решение, которое я попробовал, это поместить ссылки фоторамы в событие onAfterPageLoad, но это не работает.

html

      <head>
       ....
      <link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
       ....
      </head>
      <div class="infinite-container">
      {% for post in posts %}
       .................
       <div class="infinite-item">
       <div class="fotorama" data-allowfullscreen="native" data-nav="false">
       <img src="{{ post.image.url }}" loading="lazy">

       </div>
       </div>
       ...........................
      {% endfor %}
      </div>
     {% if posts.has_next %}
     <a class="infinite-more-link" href="?page={{ posts.next_page_number }}"></a>
     {% endif %}
     <script>
     var infinite = new Waypoint.Infinite({
                   element: $('.infinite-container')[0],
                   onBeforePageLoad: function () {
                   $('.loading').show();
                    
                   },
                   onAfterPageLoad: function ($items) {
                   $('.loading').hide();
  
                   }
                });
   </script>

Как я могу этого добиться?

Вернуться на верх