jquery 动态加载插件

jquery 动态加载插件
插件自己编写的请注意使用权限

//The MIT License (MIT)

//Copyright (c) 2017 Jonny Su

//Permission is hereby granted, free of charge, to any person obtaining a copy
//of this software and associated documentation files (the "Software"), to deal
//in the Software without restriction, including without limitation the rights
//to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
//copies of the Software, and to permit persons to whom the Software is
//furnished to do so, subject to the following conditions:

//The above copyright notice and this permission notice shall be included in all
//copies or substantial portions of the Software.

//THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
//SOFTWARE.

/**
* Copyright 2017 Jonny Su.
* https://jonnysu.github.io/pages/
*/

(function ($,window) {
    $.extend($.fn, {
        dataLoader: function (setting) {
            var ps = $.extend({
                loadingUrl: "",
                success: function () { },
                beforeSend: function () { }
            }, setting);
            var $that = this;
            var loading = false;//初始化 是否正在加载
            var page = 1;
            $(window).scroll(function (event) {
                //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载.
                if ($(this).scrollTop() + $(window).height() + 10 >= $(document).height() && $(this).scrollTop() > 10) {
                    if (loading == false) {
                        loading = true;
                        //$.post(ps.loadingUrl, { "page": page },
                        //    function (data) {
                        //        ps.success(data, $that);//data为数据,$that为执行$().dataloader()的那个jquery元素
                        //        loading = false;
                        //        page += 1;
                        //    });
                        $.ajax(
                             {
                                 type: "post",//通常会用到两种：GET,POST。默认是：GET
                                 url: ps.loadingUrl,//(默认: 当前页地址) 发送请求的地址
                                 //dataType: "html",//预期服务器返回的数据类型。
                                 data:{ "page": page },
                                 beforeSend: ps.beforeSend($that), //发送请求
                                 success: function (data) {
                                             ps.success(data, $that);//data为数据,$that为执行$().dataloader()的那个jquery元素
                                             loading = false;
                                             page += 1;

                                 }, //请求成功
                                 error: function () { },//请求出错
                                 complete: function () { }//请求完成
                             });
                    }



                }
            });



        }
    });
})(jQuery,window);

使用方法

<script src="~/Scripts/dataLoader.js"></script>
<script>

    $(".container").dataLoader({
        loadingUrl: "/Center?shopid=@ViewBag.shopid",//post
        beforeSend: function ($me) {
            if ($me.has(".loading").length == 0) $me.append("<div class='loading' style='text-align:center;padding:2em;color:grey;'>正在加载</div>");
        },
        success: function (data, $me) {
            if (data == "false") {
                if ($me.has(".nomore").length == 0) $me.append("<div class='nomore' style='text-align:center;padding:2em;color:grey;'>没有更多商品了</div>");
            }else{
                $me.append(data)
            }
            $me.find(".loading").remove();
        },
    });
</script>