javascript - 研究懒加载代码时遇到的一个疑惑
黄舟
黄舟 2017-04-10 14:52:47
[JavaScript讨论组]

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

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"));//以及这一行
            };
        });
    })
黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(2)
怪我咯

$('<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;
                    })
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号