Article Detail

zepto图片延迟加载插件picLazyLoad

/** * Zepto picLazyLoad Plugin * 西门 http://ons.me/484.html * 20140517 v1.0 */ ;(...

HTML 阅读 12.9万 5 分钟阅读 2015-12-22 10:29
GDScript3
57 行
/**
 * Zepto picLazyLoad Plugin
 * 西门 http://ons.me/484.html
 * 20140517 v1.0
 */

;(function($){
    $.fn.picLazyLoad = function(settings){
        var $this = $(this),
            _winScrollTop = 0,
            _winHeight = $(window).height();

        settings = $.extend({
            threshold: 0, // 提前高度加载
            placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC'
        }, settings||{});

        // 执行懒加载图片
        lazyLoadPic();

        // 滚动触发换图
        $(window).on('scroll',function(){
            _winScrollTop = $(window).scrollTop();
            lazyLoadPic();
        });

        // 懒加载图片
        function lazyLoadPic(){
            $this.each(function(){
                var $self = $(this);
                // 如果是img
                if($self.is('img')){
                    if($self.attr('data-original')){
                        var _offsetTop = $self.offset().top;
                        if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
                            $self.attr('src',$self.attr('data-original'));
                            $self.removeAttr('data-original');
                        }
                    }
                // 如果是背景图
                }else{
                    if($self.attr('data-original')){
                        // 默认占位图片
                        if($self.css('background-image') == 'none'){
                            $self.css('background-image','url('+settings.placeholder+')');
                        }
                        var _offsetTop = $self.offset().top;
                        if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
                            $self.css('background-image','url('+$self.attr('data-original')+')');
                            $self.removeAttr('data-original');
                        }
                    }
                }
            });
        }
    }
})(Zepto);
Comments 评论区
评论区 当前文章还没有公开评论
Comment Form 留下评论
正在回复 #0
粘贴图片、拖拽文件,或点上面的按钮上传 图片会自动插入 [img] 标签,其他附件会自动插入 [attach] 标签。
正在上传...
提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称;reply 会生成一条带楼层回链的新评论,quote 会附带完整引用块,并保持评论锚点跳转。

lizhenqiu blog is powered by lizhenqiu.com Version 6.9

Processed in 0.0096 second(s) W3C

本博客的所有原创作品采用 知识共享 署名-非商业性使用-相同方式共享 2.5 协议 进行许可

本站由 七七牛 云存储 阿阿里云 计算与安全服务 拍又拍云 CDN 加速 百百度智能 AAMH 布布集网 AI指南针AI

桂公网安备 45010302000998号 桂ICP备15007619号-1 中国互联网举报中心 建议使用谷歌浏览器浏览
Navigation 文章导航
⌂ ↓ ↑
100%
图片预览
Gallery 图集
0 张图片

正在整理正文和评论里的图片。

当前页还没有可展示的图片。
Quick Comment 快速评论

直接输入内容,提交时仍会走当前页面的人机验证。

正在上传...
操作提示