首页 > 研究懒加载代码时遇到的一个疑惑

研究懒加载代码时遇到的一个疑惑

研究懒加载遇到了问题,不明白下面代码里标注的的那一行的意思及意义,希望哪位懂的帮忙解释下

this.each(function() {
    var self = this;            
        self.loaded = false; 
        $(self).one("appear", function() {
            if (!this.loaded) {
                $("<img />") .bind("load", function() {//关于这一行的解释
                        $(self)
                            .hide()
                            .attr("src", $(self).data("original"))
                            [settings.effect](settings.effectspeed);
                        self.loaded = true;
                    })
                    .attr("src", $(self).data("original"));//以及这一行
            };
        });
    })

$('<img />')创建一个新的img元素
.bind("load" 绑定load事件,资源加载完毕后触发
.attr("src", ... 将这个元素的src属性修改,因为是img所以会开始加载$(self).data("original")这张图片,加载完毕后即触发之前的load事件


楼主可看成这样,首先创建一个Img,给这个img赋src,之后请求加载图片资源,待加载完后出发load事件

$("<img />") .attr("src", $(self).data("original"))
              .bind("load", function() {
                        $(self)
                            .hide()
                            .attr("src", $(self).data("original"))
                            [settings.effect](settings.effectspeed);
                        self.loaded = true;
                    })
【热门文章】
【热门文章】