jquery plugin with requirejs issue

Question

I am using Backbone, Undersocre, jquery and Requirejs with lazyload plugin. Inside main.js I am using shim to load this plugin like follow

require.config({
   shim: {
    'backbone': {
        deps: ['vendor/underscore/underscore', 'jquery'],
        exports: 'Backbone'
    },
    lazyload: ['jquery', 'lazyload']
  },

  paths: {
    text:        'vendor/text',
    jquery:      'vendor/jquery.min',
    lazyload:    'plugins/jquery.lazyload',
    backbone:    'vendor/backbone/backbone',
  }
});

Then below is one of my view where I want to use this plugin

define(['backbone', 'text!../../templates/movie.tpl'], function (Backbone, MovieTemplate)     {
var Movie = Backbone.View.extend({
    className: 'boxone',

    render: function () {
        console.log(this.model.toJSON());
        this.$el.html(_.template(MovieTemplate, this.model.toJSON())).fadeIn();
        this.addLazyLoad();
        return this;
    },

    addLazyLoad: function () {
        this.$el.find('img.poster').lazyload(); //<-- here I am using lazyload plugin
    }
});

return Movie;
});

But this gives me following error

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

Where am I making mistake

Update

I changed my shims to following

shim: {
'backbone': {
    deps: ['vendor/underscore/underscore', 'jquery'],
    exports: 'Backbone'
},
lazyload: { 
    deps: ['jquery'], 
    exports: 'jQuery.fn.lazyload' //<-- made change here
}
  },

And view to following

define(['backbone', 'lazyload', 'text!../../templates/movie.tpl'], function (Backbone, LazyLoad, MovieTemplate) { //<-- Added lazyload here
var Movie = Backbone.View.extend({
    className: 'boxone',

    render: function () {
        this.$el.html(_.template(MovieTemplate, this.model.toJSON())).fadeIn();
        this.addLazyLoad();
        return this;
    },

    addLazyLoad: function () {;
        console.log(LazyLoad); //<-- this does show plugin code in console
        this.$el.find('img.poster').LazyLoad; //<-- now I am calling it like this
    }
});

return Movie;
});

But it is still not working and this time it does not show any error.

UPDATE 2

When I do console.log(Lazyload) inside my view's addLazyLoad function the it shows function which starts like this

function (options) {
    var settings = {
        threshold    : 0,
        failurelimit : 0,
        event        : "scroll",
        effect       : "show",
        container    : window
    };

    if(options) {
        $.extend(settings, options);
    }

whereas the plugin data starts like this

(function($) {

// on the iPad, the offset top value is exactly off by the window scroll top
function getOffsetTop( element ) {

    var offsetTop = $(element).offset().top;

    if ( navigator.userAgent.match( /ipad/i ) ) {
        offsetTop -= $(window).scrollTop();
    }

    return offsetTop;

}

$.fn.lazyload = function(options) {
    var settings = {
        threshold    : 0,
        failurelimit : 0,
        event        : "scroll",
        effect       : "show",
        container    : window
    };

This is strange behavior I guess. Is this the problem or it lies somewhere else in my code? Please help me

I am still waiting for help. Please help me to solve my issue. I think I am doing everything right still it does not work or I am making mistake somewhere which I really can't figure out where it is. Please help. — Om3ga
– Om3ga, Commented Feb 24, 2013 at 19:31

Community · Accepted Answer · 2017-05-23 11:43:21Z

2

you should declare the lazyload plugin inside the shim config like you did with backbone. I assume lazyload doesn't have commonjs-style export/define and you need to use the shim config to declare it.

take a look at this question for adding jquery plug-ins

UPDATE:

Check this jsfiddle. It's working for me using the following code:

requirejs.config({
    shim: {
        'jquery': [],
        'jquery.lazyload': ["jquery"]
    },

paths: {
    'jquery': 'http://code.jquery.com/jquery-1.8.3',
    'jquery.lazyload': "https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload"
    }
});

require(["jquery.lazyload"], function() {
    console.log($("body").lazyload);
});

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Feb 24, 2013 at 9:38

neeebzz

11.5k7 gold badges50 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Om3ga Over a year ago

I think I did the same thing as in that link which you provided. you mean I should do something like this 'lazyload': { deps: ['jquery'], exports: 'Lazyload' }?

neeebzz Over a year ago

I am not too familiar with requirejs syntax but yea i think that should work

Om3ga Over a year ago

The how will I use in my view above? I am doing the same way but it still not working

neeebzz Over a year ago

with your update, try calling this.$el.find('img.poster').lazyload(); . that might work.

Om3ga Over a year ago

.lazyload() does not work either and again it does not show any error. What am I doing wrong?

Collectives™ on Stack Overflow

jquery plugin with requirejs issue

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related