jQuery.Deferred异常：$（...）。magnificPopup不是函数

Question

我具有以下脚本标记和顺序：

<div class="js-gallery">
  <div class="row gtr-50 gtr-uniform">
    <div class="col-3">
      <span class="fit image"><a href="/images/lion.jpg" title="lion">
            <img alt="lion" src="/images/lion.jpg"></a>
          </span>
    </div>
  </div>
</div>

<script src="/js/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
  $(function() {
    $('.js-gallery').magnificPopup({
      delegate: 'a',
      type: 'image',
      tLoading: 'Loading image #%curr%...',
      mainClass: 'mfp-img-mobile',
      gallery: {
        enabled: true,
        navigateByImgClick: true,
        preload: [0, 1] // Will preload 0 - before current, and 1 after the current image                      
      },
      image: {
        tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
        titleSrc: function(item) {
          return item.el.attr('title');
        }
      }
    });
  });
</script>

但是我遇到以下错误：

  

jQuery.Deferred异常：$（...）。magnificPopup不是函数TypeError：$（...）。magnificPopup不是函数

我已经检查了“网络”标签，并加载了宏弹出菜单

Answer 1

如果单独使用您的示例，效果很好，请查看此处的代码段...

您的问题在其他地方，通常是jQuery。当页面加载许多jQuery实例而导致冲突时，会发生Deferred异常。

<div class="js-gallery">
   <div class="row gtr-50 gtr-uniform">
       <div class="col-3">
           <span class="fit image"><a href="https://lorempixel.com/400/200/sports/1/" title="lion">
                   <img alt="lion" src="https://lorempixel.com/400/200/sports/1/"></a>
            </span>
       </div>
   </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<script>
  $(function () {    


     $('.js-gallery').magnificPopup({                     
         delegate: 'a',
         type: 'image',
         tLoading: 'Loading image #%curr%...',
         mainClass: 'mfp-img-mobile', 
         gallery: { 
                 enabled: true, 
                 navigateByImgClick: true,
                 preload: [0,1] // Will preload 0 - before current, and 1 after the current image                      
         },                     
         image: {                        
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                         return item.el.attr('title') ; 
                }                      
          }          
     }); 

    });  
         
</script>