如何在Codeigniter的可滚动部分创建一个无限的向下滚动网格加载器?

问题描述:

我正在使用Codeigniter框架和引导,进入这个安装我有一些子页面,其中一个我试图有一个无限的滚动加载器。 为此,我使用从本教程gridScrollFx.js下载的jQuery。 这是我的JS文件:如何在Codeigniter的可滚动部分创建一个无限的向下滚动网格加载器?

;(function(window) { 

'use strict'; 

var docElem = window.document.documentElement, 
    support = { animations : Modernizr.cssanimations }, 
    animEndEventNames = { 
     'WebkitAnimation' : 'webkitAnimationEnd', 
     'OAnimation' : 'oAnimationEnd', 
     'msAnimation' : 'MSAnimationEnd', 
     'animation' : 'animationend' 
    }, 
    // animation end event name 
    animEndEventName = animEndEventNames[ Modernizr.prefixed('animation') ]; 
... 
... 
// add to global namespace 
window.GridScrollFx = GridScrollFx; 
})(window); 

我从控制台得到这个错误:“未定义是不是一个函数”此行:

animEndEventName = animEndEventNames[ Modernizr.prefixed('animation') 

在那里我想有这种效果的网页看起来像这样:

<head>  
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/normalize.css" type="text/css" /> 
    <link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/component.css" type="text/css" /> 
    <script src="<?php echo base_url(); ?>assets/js/modernizr.custom.js"></script> 
</head> 

<div class="container"> 
     <section class="grid-wrap">  
      <ul class="grid swipe-right" id="grid"> 

      <li><a href="#"><img src="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/images/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li> 
... 
... 


      </ul> 
     </section> 

    <script src="<?php echo base_url(); ?>assets/js/imagesloaded.pkgd.min.js"></script> 
    <script src="<?php echo base_url(); ?>assets/js/colorfinder-1.1.js"></script> 
    <script src="<?php echo base_url(); ?>assets/js/masonry.pkgd.min.js"></script> 
    <script src="<?php echo base_url(); ?>assets/js/gridScrollFx.js"></script> 
    <script src="<?php echo base_url(); ?>assets/js/classie.js"></script> 

     <script> 
      new GridScrollFx(document.getElementById('grid'), { 
       viewportFactor : 0.4 
      }); 
     </script> 
</div> 

我该如何解决这个Javascript问题?

来自PHP,所以也许读这个错误。但我会尝试:

function(window)

您没有函数名称,只有一个参数。窗口是函数的参数。试着按照教程找出名字应该是什么?

+0

这是因为Js文件结尾为:\t'//添加到全局名称空间 \t window.GridScrollFx = GridScrollFx; })(window);' – NineCattoRules 2015-02-06 14:39:45

您会收到此错误消息,因为您的modernizr.custom.js不包含可选的Modernizr.prefixed()模块。

您需要下载modernizr library并在“扩展性”部分选择Modernizr.prefixed()模块。