2015-08-28 35 views
9

$container.imagesLoaded is not a function hatası alıyorum.

(function ($, root, undefined) { 

    $(function() { 

    'use strict'; 
    //// 

    var $container = $('.grid'); 

     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector: '.grid-item', 
      columnWidth: 100 
      }); 
     }); 

     $container.infinitescroll({ 
      navSelector : '#rh_nav_below', 
      nextSelector : '#rh_nav_below .rh_nav_next a', 
      itemSelector : '.grid-item', 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
      } 
      },    
      function(newElements) {    
      var $newElems = $(newElements).css({ opacity: 0 });    
      $newElems.imagesLoaded(function(){     
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      }); 
      } 
     );  

    //// 

}); 

})(jQuery, this); 

Ardından altbilgi aşağıdaki etmiştir js dosyaları: Eksik bir şey

<script type="text/javascript" src="http://example.com/js/masonry.pkgd.min.js"></script> 
    <script type="text/javascript" src="http://example.com/jquery.infinitescroll.min.js"></script> 

var mı Burada

başlığında bulunan kod nedir? Soruna neden olan dosyanın yeri nedir?

Teşekkür ederiz.

DÜZENLEME 1

Aşağıdakilerden altbilgi yer almaktadır ve senaryo anonim işlev tarafından geçirilir. Ama yine de aynı hata alıyor.

<script type="text/javascript" src="http://example.com/js/masonry.pkgd.min.js"></script> 
    <script type="text/javascript" src="http://example.com/jquery.infinitescroll.min.js"></script> 
    <script type="text/javascript"> 
    (function($) { 
     var $container = $('.grid'); 

      $container.imagesLoaded(function(){ 
       $container.masonry({ 
       itemSelector: '.grid-item', 
       columnWidth: 100 
       }); 
      }); 

      $container.infinitescroll({ 
       navSelector : '#rh_nav_below', 
       nextSelector : '#rh_nav_below .rh_nav_next a', 
       itemSelector : '.grid-item', 
       loading: { 
        finishedMsg: 'No more pages to load.', 
        img: 'http://i.imgur.com/6RMhx.gif' 
       } 
       },    
       function(newElements) {    
       var $newElems = $(newElements).css({ opacity: 0 });    
       $newElems.imagesLoaded(function(){     
        $newElems.animate({ opacity: 1 }); 
        $container.masonry('appended', $newElems, true); 
       }); 
       } 
      );  
    })(jQuery); 
    </script> 
+0

imagesloaded.js dosyası nedir? Ben senin örneklerinde göremiyorum. –

+0

Bu masonry.pkgd.min.js içinde (http://masonry.desandro.com/). Hala bir şekilde çalışmıyor: P –

+0

Sadece emin olun, 3.0.0 veya daha yeni bir duvar kullanmıyorsunuz, değil mi? https://github.com/desandro/masonry/blob/master/changelog.md –

cevap

18

imagesYüklenen sürüm 3.0.0 sürümünde Masonry'den kaldırıldı. Ayrı olarak eklemeniz gerekecek. http://imagesloaded.desandro.com/

+0

Ah! = D Yardım için teşekkürler! Bunu anlamayacaktım. Çok teşekkür ederim! =) –

2

Sayfada gömülü olan kodların üzerinde başvurulan kodun üzerinde olması gerekir. Kodunuzu komut dosyalarından sonra koyun ve işe yaramalı.

<script type="text/javascript" src="http://example.com/js/masonry.pkgd.min.js"></script> 
<script type="text/javascript" src="http://example.com/jquery.infinitescroll.min.js"></script> 
<script> 
(function ($, root, undefined) { 

    $(function() { 

    'use strict'; 
    //// 

    var $container = $('.grid'); 

     $container.imagesLoaded(function(){ 
      $container.masonry({ 
      itemSelector: '.grid-item', 
      columnWidth: 100 
      }); 
     }); 

     $container.infinitescroll({ 
      navSelector : '#rh_nav_below', 
      nextSelector : '#rh_nav_below .rh_nav_next a', 
      itemSelector : '.grid-item', 
      loading: { 
       finishedMsg: 'No more pages to load.', 
       img: 'http://i.imgur.com/6RMhx.gif' 
      } 
      },    
      function(newElements) {    
      var $newElems = $(newElements).css({ opacity: 0 });    
      $newElems.imagesLoaded(function(){     
       $newElems.animate({ opacity: 1 }); 
       $container.masonry('appended', $newElems, true); 
      }); 
      } 
     );  

    //// 

}); 
</script> 

Esasen .imagesLoaded ve .infiniteScroll onların tanımını içeren komut yüklendi kadar var yok:

bu gibi altbilgi görünüm olun. Bu, komut dosyası etiketleri aracılığıyla bir tarayıcıda gerçekleşir.

+0

Cevabınız için teşekkür ederiz. Benim için biraz daha detaylandırır mısın? Teşekkür ederim. –

+0

Cevabınız için teşekkür ederiz. Komut dosyasını geçmek için anonim işlev kullandım ama yine de aynı hatayı alıyorum. Bu sinir bozucu. lol (Bkz. DÜZEN 1) –