javascript - requireJS 和 ImagesLoaded : Object [object Object] has no method 'imagesLoaded'

Question

我遇到了 this question 中描述的相同问题。但似乎没有正确答案。

我正在尝试使用 require.js 加载“loadImages”库，但我明白了

Uncaught TypeError: Object [object Object] has no method 'imagesLoaded'

这是我页面上的脚本:

require(['./js/common'], function(common) 
{
    require(['home/main-home']);
});

我的common.js

requirejs.config({
    baseUrl: './js',
    paths: {
        jquery : 'libs/jquery/jquery-2.0.3.min',


        eventie  : 'libs/eventie/eventie',
        eventEmitter  : 'libs/eventEmitter/eventEmitter.min',
        imagesLoaded  : 'libs/imagesLoaded/imagesloaded.pkgd.min',

        masonry  : 'libs/masonry/masonry.pkgd.min',
        wall : './wall/wall',
        underscore  : '../libs/underscore/underscore-min',
        backbone : '../libs/backbone/backbone-min',
    },
    shim: {

        jquery : {
            exports : '$'
        },

        imagesLoaded : {
            deps : ['jquery', 'eventie', 'eventEmitter']
        },

        masonry : ['jquery'],
        wall : ['masonry', 'imagesLoaded'],

        backbone : {
            deps : ['jquery', 'underscore'],
            exports : 'Backbone'
        },

        underscore : {
            exports : '_'
        }

    }
});

这是我的 main-home.js，我想在其中使用 imagesLoaded 库。

define([
  'wall'
], 
function(Wall){

  $(function() 
  {
      $('#photos').imagesLoaded( function(){}); // ERROR
  });

  return true;
});

在 imagesLoaded 文档中有一个关于 require.js 的小段落，我不太明白。我也尝试加载这些库，但它没有改变任何东西。

// Install imagesLoaded and its dependencies
// Update your RequireJS paths config so it can find those modules
requirejs.config({
  paths: {
    "eventie": "bower_components/eventie",
    "eventEmitter": "bower_components/eventEmitter"
  }
});

他们似乎在这里谈论它 https://github.com/desandro/imagesloaded/issues/68 ，但我真的不知道该怎么做。

这是我的页面正在加载的 js 文件:

我们可以看到 imagesLoaded 已加载... 我怎么还是有这个错误？

Answer 1

This jsfiddle works .

我已经编辑了 ImagesLoaded JS ( as a gist ) 来为模块提供一个有效的模块 ID。

搜索:

// --------------------------------------------------
// ADDED A MODULE ID
// --------------------------------------------------

在代码中进行 3 处更改(定义 imagesLoaded、eventEmitter/EventEmitter 和 eventie/eventie 模块)。

鉴于 ImageLoaded JS 文件已经包含其他 2 个模块，因此不需要任何更多路径/垫片。

HTML

<div id="photos"></div>
<script>
require = {
    paths: {
        "jquery": "http://code.jquery.com/jquery-2.0.3",
        "imagesLoaded": "https://rawgithub.com/gitgrimbo/6451492/raw/f26e23d7a180ee23fd3dea3b0b152dbf523854a1/ImageLoaded-mod"
    }
};
</script>
<script src="http://requirejs.org/docs/release/2.1.8/comments/require.js"></script>

JS

require(["jquery", "imagesLoaded"], function($, imagesLoaded) {
    console.log($.fn.jquery);
    console.log(imagesLoaded);
    $('#photos').imagesLoaded(function() {
        console.log("something");
    });
});

输出

2.0.3
ImagesLoaded( elem, options, onAlways )
something