如何使用 Codeigniter 在可滚动部分中创建无限向下滚动网格加载器？答案

【问题标题】：How could I create an infinite scroll down grid loader in a scrollable section with Codeigniter?如何使用 Codeigniter 在可滚动部分中创建无限向下滚动网格加载器？
【发布时间】：2015-02-06 14:15:49
【问题描述】：

我正在使用 Codeigniter 框架和引导程序，在这个安装中我有一些子页面，其中一个我试图拥有一个无限滚动加载器。为此，我使用从本教程gridScrollFx.js 下载的 jQuery。这是我的 JS 文件：

;( 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 问题？

【问题讨论】：

标签： javascript php twitter-bootstrap codeigniter

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

来自 PHP，所以可能读错了。但我会尝试：

函数（窗口）

你没有函数名，只有一个参数。窗口是函数的参数。尝试按照教程查找名称应该是什么？

【讨论】：

因为Js文件结尾是：// add to global namespace window.GridScrollFx = GridScrollFx; } )( window );