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

Posted 2020-09-09 防空洞123

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();
   })
});