文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Uncaught : grid.imagesLoaded不是函数

问Uncaught : grid.imagesLoaded不是函数
EN

Stack Overflow用户
提问于 2021-03-07 11:07:40
回答 1查看 262关注 0票数 0

我试图使一个结构，我已经获得了一个现成的主题兼容搜索引擎优化。我现在的处境就像我在下面的例子一样。当我使用，npm，运行dev，，在终端中没有错误，但是开发者控制台响应，如下图所示。

开发者控制台映像

正如您所看到的，TypeError: grid.imagesLoaded不是一个函数。我正在使用webpack在Laravel，并且已经包括了imagesloaded.pkgd.min.js

以下是代码：

webpack.mix.js

代码语言：javascript
复制
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'));

/* Custom Mix Assets */

mix.styles([
    'public/guest/css/bootstrap-custom.css',
    'public/guest/css/ionicons.min.css',
    'public/guest/css/tiny-slider.css',
    'public/guest/css/lity.min.css',
    'public/guest/css/simplebar.min.css',
    'public/guest/css/jquery.mb.YTPlayer.min.css',
    'public/guest/css/main.css',
    'public/guest/css/colors/main-darkblue.css',
    'public/guest/css/custom.css',
], 'public/css/bundle.css').sourceMaps().version();

mix.js([
    'public/guest/js/jquery.min.js',
    'public/guest/js/bootstrap.bundle.min.js',
    'public/guest/js/imagesloaded.pkgd.min.js',
    'public/guest/js/isotope.pkgd.min.js',
    'public/guest/js/animatedModal.js',
    'public/guest/js/tiny-slider.js',
    'public/guest/js/lity.min.js',
    'public/guest/js/simplebar.min.js',
    //'public/guest/js/jquery.mb.YTPlayer.min.js',
    'public/guest/js/main.js',
    'public/guest/js/custom.js',
], 'public/js/bundle.js').version();

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                lity: 'lity',
                imagesLoaded: 'imagesLoaded'
            })
        ]
    };
});

package.json

代码语言：javascript
复制
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/ui": "^0.6.0",
        "alpinejs": "^2.7.3",
        "axios": "^0.21.1",
        "cross-env": "^7.0.3",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "^1.8.0",
        "vue-template-compiler": "^2.6.12",
        "jquery": "3.4.1",
        "lity": "^2.4.1",
        "imagesloaded": "^4.1.4"
    }
}

main.js

代码语言：javascript
复制
(function() {
      /* Setup Isotope */
      var grid = $('.portfolio-section .portfolio-grid');
      var filters = $('.portfolio-section .filter-control li');
      grid.imagesLoaded(function() {
        grid.isotope({
          itemSelector: '.portfolio-section .single-item',
          masonry: {
            horizontalOrder: true
          }
        });
        filters.on('click', function() {
          filters.removeClass('tab-active');
          $(this).addClass('tab-active');
          var selector = $(this).data('filter');
          grid.isotope({
            filter: selector,
            transitionDuration: '.25s'
          });
        });
      });
    }());
javascript
laravel
webpack
EN

回答 1

Stack Overflow用户

发布于 2021-03-07 13:07:06

我将以下代码添加到main.js文件的开头，并解决了错误

代码语言：javascript
复制
var imagesLoaded = require('imagesloaded');
var Isotope = require('isotope-layout');
var jQueryBridget = require('jquery-bridget');
imagesLoaded.makeJQueryPlugin( $ );
jQueryBridget( 'isotope', Isotope, $ );

这是最终版本

webpack.mix.js

代码语言：javascript
复制
const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ])
    .webpackConfig(require('./webpack.config'));

/* Custom Mix Assets */

mix.styles([
    'public/guest/css/bootstrap-custom.css',
    'public/guest/css/ionicons.min.css',
    'public/guest/css/tiny-slider.css',
    'public/guest/css/lity.min.css',
    'public/guest/css/simplebar.min.css',
    'public/guest/css/jquery.mb.YTPlayer.min.css',
    'public/guest/css/main.css',
    'public/guest/css/colors/main-darkblue.css',
    'public/guest/css/custom.css',
], 'public/css/bundle.css').sourceMaps().version();

mix.js([
    //'public/guest/js/jquery.min.js',
    //'public/guest/js/bootstrap.bundle.min.js',
    //'public/guest/js/imagesloaded.pkgd.min.js',
    //'public/guest/js/isotope.pkgd.min.js',
    'public/guest/js/animatedModal.js',
    //'public/guest/js/tiny-slider.js',
    //'public/guest/js/lity.min.js',
    //'public/guest/js/simplebar.min.js',
    //'public/guest/js/jquery.mb.YTPlayer.min.js',
    'public/guest/js/main.js',
    'public/guest/js/custom.js',
], 'public/js/bundle.js').version();

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                lity: 'lity',
                imagesLoaded: 'imagesLoaded'
            })
        ]
    };
});

package.json

代码语言：javascript
复制
{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@tailwindcss/ui": "^0.6.0",
        "alpinejs": "^2.7.3",
        "axios": "^0.21.1",
        "bootstrap": "4.3.1",
        "cross-env": "^7.0.3",
        "imagesloaded": "^4.1.4",
        "isotope-layout": "^3.0.6",
        "jquery": "^3.6.0",
        "jquery.mb.ytplayer": "^3.3.8",
        "laravel-mix": "^5.0.1",
        "lity": "2.4.0",
        "lodash": "^4.17.19",
        "postcss-import": "^12.0.1",
        "resolve-url-loader": "^3.1.0",
        "simplebar": "4.2.3",
        "tailwindcss": "^1.8.0",
        "tiny-slider": "^2.9.3",
        "vue-template-compiler": "^2.6.12",
        "jquery-bridget": "^3.0.0"
    }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/66515807

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档