码迷,mamicode.com
首页 > Web开发 > 详细

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

时间:2017-04-08 13:56:07      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:each   target   logs   hive   src   bsp   this   ase   ref   

http://www.w3cways.com/1765.html

http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html

 

jquery插件的写法,以及requireJS如何引入jquery插件

下面,就是一个自制的jQuery小插件(affix),用于固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置),不随滚动条的下拉而移动

;(function(){
    $.fn.extend({
            ‘affix‘:function(opt){
                var DEFAULT = {
                    ‘offLeft‘:‘0‘,
                    ‘offT‘:‘0‘
                };
                var options = $.extend({},DEFAULT,opt);
                this.each(function(){
                    var obj = $(this);
                    var offTop = obj.offset().top;
                    $(window).bind(‘scroll‘,checkTop);
                    function checkTop(){
                        var scrollT = $(window).scrollTop();
                        if(scrollT >= offTop) {
                            obj.css({‘position‘:‘fixed‘,‘left‘:‘0‘,‘top‘:options.offT});
                        } else {
                            obj.css({‘position‘:‘static‘});
                        }
                    }
                });

        }
    });
})($)

这个插件是一个符合jquery插件规范的,大家可以参照这种jquery插件的写法,来封装自己的插件。

那么在requireJS中,如何使用呢? 
<script src="js/require-2.1.11.js" data-main="js/main"></script> 
在我们的项目中引入requireJS,data-main="js/main" 
main.js就是我们项目中js文件的入口文件

require.config({
    paths:{
        ‘jquery‘: [
            ‘https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min‘,
            ‘https://cdn.bootcss.com/jquery/2.1.4/jquery.min‘
        ]
    },
    shim:{
        ‘affix‘:{
            deps:[‘jquery‘]
        }
    }

});
require([‘affix‘],function(){
    $(‘.subnav‘).affix();
    $(‘.aside‘).affix();
});

因为affix是一个深度依赖jquery的小插件,所以我们在require中引入affix的时候,需要先配置affix的依赖项

shim:{
    ‘affix‘:{
        deps:[‘jquery‘]
    }
}

那么页面中class为subnav和aside的元素,当滚动条往下拉的时候 ,元素滚动页面顶部的时候,就会被定住,不会继续往上滚动了。

 

require.config({
paths : {
"jquery": ["/static/lib/jquery.min"],
"jquery.lazyload": ["/static/lib/jquery.lazyload"],
"header":["/static/ns/js/header"],
},
shim:{
‘jquery.lazyload‘:{
deps:[‘jquery‘]
}
}
});
function getvipLevelClass(vip){
return ‘u-level-0‘+vip;
}
require([‘jquery‘,‘header‘,‘jquery.lazyload‘],function($,header){
$(function(){
header.init();
$("img.lazy").lazyload();
})
});

 

jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

标签:each   target   logs   hive   src   bsp   this   ase   ref   

原文地址:http://www.cnblogs.com/as3lib/p/6681519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!