异步加载Div的内容 [英] Asynchronously Load the Contents of a Div
问题描述
我正在寻找一种异步加载整个div内容的方法。我想延迟加载div中的所有东西。另外,假设每个div都有一个图像。
I'm looking for a way to asynchronously load the contents of a whole div. I'd like to delay the loading of everything in the div. Also, assume that each div has an image in it.
https://codepen.io/anon/pen/GENGJW
(function($){
var paginate = {
startPos: function(pageNumber, perPage) {
// determine what array position to start from
// based on current page and # per page
return pageNumber * perPage;
},
getPage: function(items, startPos, perPage) {
// declare an empty array to hold our page items
var page = [];
// only get items after the starting position
items = items.slice(startPos, items.length);
// loop remaining items until max per page
for (var i=0; i < perPage; i++) {
page.push(items[i]); }
return page;
},
totalPages: function(items, perPage) {
// determine total number of pages
return Math.ceil(items.length / perPage);
},
createBtns: function(totalPages, currentPage) {
// create buttons to manipulate current page
var pagination = $('<div class="pagination" />');
// add a "first" button
pagination.append('<span class="pagination-button">«</span>');
// add pages inbetween
for (var i=1; i <= totalPages; i++) {
// truncate list when too large
if (totalPages > 5 && currentPage !== i) {
// if on first two pages
if (currentPage === 1 || currentPage === 2) {
// show first 5 pages
if (i > 5) continue;
// if on last two pages
} else if (currentPage === totalPages || currentPage === totalPages - 1) {
// show last 5 pages
if (i < totalPages - 4) continue;
// otherwise show 5 pages w/ current in middle
} else {
if (i < currentPage - 2 || i > currentPage + 2) {
continue; }
}
}
// markup for page button
var pageBtn = $('<span class="pagination-button page-num" />');
// add active class for current page
if (i == currentPage) {
pageBtn.addClass('active'); }
// set text to the page number
pageBtn.text(i);
// add button to the container
pagination.append(pageBtn);
}
// add a "last" button
pagination.append($('<span class="pagination-button">»</span>'));
return pagination;
},
createPage: function(items, currentPage, perPage) {
// remove pagination from the page
$('.pagination').remove();
// set context for the items
var container = items.parent(),
// detach items from the page and cast as array
items = items.detach().toArray(),
// get start position and select items for page
startPos = this.startPos(currentPage - 1, perPage),
page = this.getPage(items, startPos, perPage);
// loop items and readd to page
$.each(page, function(){
// prevent empty items that return as Window
if (this.window === undefined) {
container.append($(this)); }
});
// prep pagination buttons and add to page
var totalPages = this.totalPages(items, perPage),
pageButtons = this.createBtns(totalPages, currentPage);
container.after(pageButtons);
}
};
// stuff it all into a jQuery method!
$.fn.paginate = function(perPage) {
var items = $(this);
// default perPage to 5
if (isNaN(perPage) || perPage === undefined) {
perPage = 5; }
// don't fire if fewer items than perPage
if (items.length <= perPage) {
return true; }
// ensure items stay in the same DOM position
if (items.length !== items.parent()[0].children.length) {
items.wrapAll('<div class="pagination-items" />');
}
// paginate the items starting at page 1
paginate.createPage(items, 1, perPage);
// handle click events on the buttons
$(document).on('click', '.pagination-button', function(e) {
// get current page from active button
var currentPage = parseInt($('.pagination-button.active').text(), 10),
newPage = currentPage,
totalPages = paginate.totalPages(items, perPage),
target = $(e.target);
// get numbered page
newPage = parseInt(target.text(), 10);
if (target.text() == '«') newPage = 1;
if (target.text() == '»') newPage = totalPages;
// ensure newPage is in available range
if (newPage > 0 && newPage <= totalPages) {
paginate.createPage(items, newPage, perPage); }
});
};
})(jQuery);
$('.article-loop').paginate(2);
推荐答案
您可以使用加载()
一个元素完全加载后,JQuery执行回调函数的函数。
You can use the load()
function of JQuery to execute a callback function once a certain element has completely been loaded.
例如,如果你有三个< div>
这样的元素:
For example, if you have three <div>
elements like so:
<body>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
</body>
您可以通过将HTML更改为以下顺序加载它们:
You can load them sequentially by changing the HTML to:
<div id="first">First</div>
然后使用JQuery追加另一个 div
s一旦前一个已加载。
and then using JQuery to append the other div
s once the previous one has loaded.
$(document).ready(function() {
$("#first").load(function() {
$("body").append($("<div></div>").attr({id: "second"}).text("Second"));
$("#second").load(function() {
$("body").append($("<div></div>").attr({id: "third"}).text("Third"));
});
});
});
有更简洁的方法来编写这种逻辑,但这足以说明这一点。
There are cleaner ways to write this logic, but this is just enough to get the point across.
这篇关于异步加载Div的内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!