图片懒加载实现

之前为了把网站收录图片改成懒加载找jquery框架  后面找到一个jquery.lazyload.js
使用的过程中发现一个问题,我的页面是有四个竖的div组成,懒加载的时候,他是按照代码的先后来懒加载,这样只有第一列的div里的内容才能懒加载,后面几列都不是根据滚动条的移动而加载。
研究了好久,才发现,问题处在一下代码
/*www.yishish.com www.wotaobaoke.com  www.lingshij.com*/
        this.each(function() {
            var self = this;
           
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));    
            }

            if ("scroll" != settings.event ||
                    undefined == $(self).attr("src") ||
                    settings.placeholder == $(self).attr("src") ||
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) ||
                     $.belowthefold(self, settings) ||
                     $.rightoffold(self, settings) )) {
                       
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);     
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
           
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });
            /*www.yishish.com www.wotaobaoke.com  www.lingshij.com*/
            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
       
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
       
        return this;

    };

你可能感兴趣的:(懒加载)