Javascript 修改mootools-lazyload以将类用作容器而不是id

下面是标准的mootools lazyload代码。我需要修改代码以接受一个div类作为lazyload容器，而不是div ID。你知道怎么做吗？将IDs与Ajax结合使用会阻止lazyload正常工作，因为页面不会重新加载，因此它认为新加载的具有相同ID的内容是该ID的第二个实例，而不是相同的元素。谢谢

    var LazyLoad = new Class({

        Implements: [Options,Events],

        /* additional options */
        options: {
            range: 100,
            elements: ".lazy",
            container: "post-list",
            mode: "vertical",
            realSrcAttribute: "data-src",
            useFade: true
        },

        /* initialize */
        initialize: function(options) {

            // Set the class options
            this.setOptions(options);

            // Elementize items passed in
            this.container = document.getElementById(this.options.container);
            this.elements = $$(this.options.elements);

            // Set a variable for the "highest" value this has been
            this.largestPosition = 0;

            // Figure out which axis to check out
            var axis = (this.options.mode == "vertical" ? "y": "x");

            // Calculate the offset
            var offset = (this.container != window && this.container != document.body ? this.container : "");

            // Find elements remember and hold on to
            this.elements = this.elements.filter(function(el) {
                // Make opacity 0 if fadeIn should be done
                if(this.options.useFade) el.setStyle("opacity",0);
                // Get the image position
                var elPos = el.getPosition(offset)[axis];
                // If the element position is within range, load it
                if(elPos < this.container.getSize()[axis] + this.options.range) {
                    this.loadImage(el);
                    return false;
                }
                return true;
            },this);

            // Create the action function that will run on each scroll until all images are loaded
            var action = function(e) {

                // Get the current position
                var cpos = this.container.getScroll()[axis];

                // If the current position is higher than the last highest
                if(cpos > this.largestPosition) {

                    // Filter elements again
                    this.elements = this.elements.filter(function(el) {

                        // If the element is within range...
                        if((cpos + this.options.range + this.container.getSize()[axis]) >= el.getPosition(offset)[axis]) {

                            // Load the image!
                            this.loadImage(el);
                            return false;
                        }
                        return true;

                    },this);

                    // Update the "highest" position
                    this.largestPosition = cpos;
                }

                // relay the class" scroll event
                this.fireEvent("scroll");

                // If there are no elements left, remove the action event and fire complete
                if(!this.elements.length) {
                    this.container.removeEvent("scroll",action);
                    this.fireEvent("complete");
                }

            }.bind(this);

            // Add scroll listener
            this.container.addEvent("scroll",action);
        },
        loadImage: function(image) {
            // Set load event for fadeIn
            if(this.options.useFade) {
                image.addEvent("load",function(){
                    image.fade(1);
                });
            }
            // Set the SRC
            image.set("src",image.get(this.options.realSrcAttribute));
            // Fire the image load event
            this.fireEvent("load",[image]);
        }
    });

    /* do it! */
        window.addEvent("domready",function() {
            var lazyloader = new LazyLoad({/*
                onScroll: function() { console.warn("scroll!"); },
                onLoad: function(img) { console.warn("load!", img); },
                onComplete: function() { console.warn("complete!"); }
                */
            });
        });

var LazyLoad=新类({
实现：[选项，事件]，
/*附加选项*/
选项：{
范围：100，
元素：“.lazy”，
容器：“邮件列表”，
模式：“垂直”，
realSrcAttribute:“数据src”，
真的吗
},
/*初始化*/
初始化：函数（选项）{
//设置类选项
此选项。设置选项（选项）；
//元素化传入的项
this.container=document.getElementById（this.options.container）；
this.elements=$$（this.options.elements）；
//设置一个变量作为该变量的“最高”值
此.largestPosition=0；
//找出要检出的轴
变量轴=（this.options.mode==“垂直”？“y”：“x”）；
//计算偏移量
var offset=（this.container！=窗口和this.container！=document.body？this.container:）；
//查找元素记住并坚持
this.elements=this.elements.filter（函数（el）{
//如果应进行fadeIn，则将不透明度设为0
如果（this.options.useFade）el.setStyle（“不透明度”，0）；
//获取图像位置
变量elPos=el.getPosition（偏移）[轴]；
//如果图元位置在范围内，请加载它
if（elPos此最大位置）{
//再次使用滤芯
this.elements=this.elements.filter（函数（el）{
//如果元素在范围内。。。
如果（（cpos+this.options.range+this.container.getSize（）[axis]）>=el.getPosition（offset）[axis]）{
//加载图像！
这是loadImage（el）；
返回false；
}
返回true；
}，这个）；
//更新“最高”位置
this.largestPosition=cpos；
}
//中继类“滚动”事件
本文件为fireEvent（“卷轴”）；
//如果没有剩下任何元素，请删除操作事件并完成激发
if（！this.elements.length）{
this.container.removeEvent（“滚动”，动作）；
本节为“完成”事件；
}
}.约束（本）；
//添加滚动侦听器
this.container.addEvent（“滚动”，动作）；
},
loadImage:函数（图像）{
//为fadeIn设置加载事件
if（this.options.useFade）{
image.addEvent（“加载”，函数（）{
图像。淡入淡出（1）；
});
}
//设置SRC
set（“src”，image.get（this.options.realSrcAttribute））；
//触发映像加载事件
这个.firevent（“加载”，[image]）；
}
});
/*做吧*/
addEvent（“domready”，function（））{
var lazyloader=新LazyLoad({/*
onScroll:function（）{console.warn（“scroll！”）；}，
onLoad:function（img）{console.warn（“load！”，img）；}，
onComplete:function（）{console.warn（“complete！”）；}
*/
});
});

在

初始化

功能中，更换：

// Elementize items passed in
this.container = document.getElementById(this.options.container);
this.elements = $$(this.options.elements);

与：

然后您可以将任何选择器字符串（如

”.yourClass'

，但也可以将

”.some[complex=selector]

）作为

容器

类选项。与该选择器匹配的第一个元素将用作容器。请告诉我它是否有效

// Elementize items passed in
this.container = $$(this.options.container)[0];
this.elements = $$(this.options.elements);