Javascript 使用jquery将随机引号显示为加载覆盖

我期待着为我的网站创建一个加载覆盖。每次点击一个内部链接，我都想在几秒钟内显示一段鼓舞人心的引语

经过几个小时的研究，我发现：

1。页面刷新时随机引用不同的报价？

这正是我要问的问题，但我无法解决这次讨论的问题

2。关于显示随机块引号的讨论

这对我来说是一个很好的发现，但我需要将其添加到加载/覆盖效果中几秒钟

有人能帮我吗？谢谢各位

---

--更新--

在朋友们的帮助下，我想出了一个最好的解决方案：

html:

css:

--问题--

我现在的问题是，随机引用将与随机引用匹配。如何通过匹配“引用一个”“引用一个”获得“引用一个”。。。等等如果可能的话，我仍然希望它们随机显示

下面是一个类似于这样的JSFIDLE示例

// Display Random Blockquotes and Cites 


// Create Quotes Array
var quotes = [];

// The List of Quotes!

quotes.push({"content": "Quote One", "cite": "- Cite One"});
quotes.push({"content": "Quote Two", "cite": "- Cite Two"});
quotes.push({"content": "Quote Three", "cite": "- Cite Three"});
quotes.push({"content": "Quote Four", "cite": "- Cite Four"});

var randomNumber = Math.floor(Math.random() * quotes.length);

// Alter the Current (Default) Quote Text with a Random Quote
$('#preloader blockquote').text(quotes[randomNumber]['content']);

// Alter the Current (Default) Cite Text with a Random Quote
$('#preloader cite').text(quotes[randomNumber]['cite']);


// All Code Inside Here Will Get Executed After 5 Seconds
setTimeout(function () {
    $('#preloader').fadeOut(2500, function () {
        $('#preloader').removeClass('loading');
    });
}, 2500);

// Display Random Blockquotes and Cites 


// Create Quotes Array
var quotes = [];

// The List of Quotes!
quotes[0] = "Quote One";
quotes[1] = "Quote Two";
quotes[2] = "Quote Three";
quotes[3] = "Quote Four";

// Assign the Variable "quote" with a Random Quotation from Above

var quote = quotes[Math.floor(Math.random() * quotes.length)];

// Alter the Current (Default) Quote Text with a Random Quote
$('#preloader blockquote').text(quote);

// Create Cites Array
var cites = [];

// The List of Cites
cites[0] = "- Cite One";
cites[1] = "- Cite Two";
cites[2] = "- Cite Three";
cites[3] = "- Cite Four";

// Assign the Variable "cite" with a Random Cite from Above

var cite = cites[Math.floor(Math.random() * cites.length)];

// Alter the Current (Default) Cite Text with a Random Quote
$('#preloader cite').text(cite);



// All Code Inside Here Will Get Executed After 5 Seconds
setTimeout(function () {
$('#preloader').fadeOut(2500, function () {
$('#preloader').removeClass('loading');
});
}, 2500);

#preloader {
background: #000;
height: 100%;
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
background-image: url(http://loadinggif.com/generated-image?imageId=9&bgColor=%23000000&fgColor=%23ffffff&transparentBg=0&download=0&random=0.4457789873704314);
background-position: 50% 20%;
background-repeat:no-repeat;
z-index: 999;
margin: 0;
padding: 0;
}
#preloader.loading {
/* Displays Preloader When "loading" Class Present */
display: block;
}
#preloader blockquote {
color: #fff;
display: block;
font-size: 30px;
margin: 0;
text-align: center;
border: none;
margin: 15% 0 2% 0;
padding: 0;
}
#preloader cite {
color: #fff;
display: block;
font-size: 15px;
text-align: center;
border: none;
margin: 0;
padding: 0;
}

// Display Random Blockquotes and Cites 


// Create Quotes Array
var quotes = [];

// The List of Quotes!

quotes.push({"content": "Quote One", "cite": "- Cite One"});
quotes.push({"content": "Quote Two", "cite": "- Cite Two"});
quotes.push({"content": "Quote Three", "cite": "- Cite Three"});
quotes.push({"content": "Quote Four", "cite": "- Cite Four"});

var randomNumber = Math.floor(Math.random() * quotes.length);

// Alter the Current (Default) Quote Text with a Random Quote
$('#preloader blockquote').text(quotes[randomNumber]['content']);

// Alter the Current (Default) Cite Text with a Random Quote
$('#preloader cite').text(quotes[randomNumber]['cite']);


// All Code Inside Here Will Get Executed After 5 Seconds
setTimeout(function () {
    $('#preloader').fadeOut(2500, function () {
        $('#preloader').removeClass('loading');
    });
}, 2500);