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>