修改mootools lazyload以使用class作为容器而不是id

Question

以下是标准mootools lazyload代码。我需要修改代码来接受div class作为lazyload容器而不是div ID。任何想法如何？将ID与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!"); } 
       */ 
      }); 
     }); 

Answer 1

在initialize功能，取代：

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

有了：

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

然后你可以给任何选择的字符串（如'.yourClass'，也'.some[complex=selector]'）为container类选项。与该选择器匹配的第一个元素将被用作容器。让我知道它是否有效。