P粉5584781502024-01-11 00:13:41
Satu strategi ialah menggunakan kuki dan halaman perantaraan. Ubah hala semua permintaan ke halaman perantaraan tanpa kuki tertentu, tempat kami menetapkan kuki.
Gunakan apache htaccess atau yang setara dalam pelayan lain tanpa mengubah suai halaman aplikasi anda.
Semak dalam htaccess sama ada kuki (cth. sudah dimuatkan) wujud, jika tidak, ubah hala ke "loading.html", tetapkan hasloading=true dalam "loading.html", dan kemudian ubah hala ke URL asal.
Adalah sangat penting untuk menggunakan javascript untuk mengubah hala dalam "loading.html" kerana menggunakan HTTP redirect anda tidak akan mendapat hasil yang diharapkan.
Untuk menunjukkan memuatkan imej dalam "loading.html" anda perlu menetapkan cookie hasloading=true dan kemudian menggunakan acara onload di mana anda mengubah hala ke URL asal, dalam onload anda melakukan sedikit kelewatan atau imej (sedang dimuatkan) ) akan dibekukan tanpa bergerak dalam beberapa pelayar:
<script>
window.onload = function() {
setTimeout( function() {
location.replace($ORIGIAL_URL.split('#')[0]);
}, 60 );
};
</script>
Apabila kuki tamat tempoh, anda boleh menahan "loading.html" daripada memuat semula selama beberapa hari, jam atau minit bergantung pada keperluan anda. Pilihan lain ialah menetapkan kuki bagi setiap URL.
Saya mempunyai pelaksanaan yang serupa pada beberapa tapak web.
Editor:
Untuk menggambarkan strategi, bukannya pelaksanaan, dalam contoh mudah ini kami tidak menggunakan htaccess dan melakukan ubah hala pertama pada halaman kandungan sebelum memuatkan kandungan.
Simpan sebagai index.html:
<!DOCTYPE html>
<html lang="">
<head>
<title>Content</title>
</head>
<body>
<script>
// check if a cookie exists
if (!document.cookie.match(/^(.*;)?\s*loading\s*=\s*[^;]+(.*)?$/)) {
location.replace('loading.html');
}
</script>
<h1>Content</h1>
</body>
</html>
Simpan sebagai memuatkan.html:
<!DOCTYPE html>
<html lang="">
<head>
<title>Loading</title>
</head>
<body>
<h1>Loading...</h1>
<script>
// set cookie
document.cookie = "loading=1;0;path=/";
// redirect
window.onload = function() {
setTimeout( function() {
location.replace('index.html');
}, 2000 );
};
</script>
</body>
</html>
Contoh mudah ini juga berfungsi dalam Firefox secara tempatan (file://...), dalam chrome saya ragu ia berfungsi secara tempatan.
balas
0