Rumah > Artikel > hujung hadapan web > Memahami dan Melaksanakan Tatal Infinite dengan JavaScript

Memahami dan Melaksanakan Tatal Infinite dengan JavaScript

王林asal: 2024-07-23 12:35:31718semak imbas

Entendendo e Implementando o Scroll Infinito com JavaScript

Apakah Tatal Infinite?

Anda mungkin telah melihat tapak seperti kedai dalam talian di mana, apabila anda menatal ke bawah halaman, produk muncul secara berterusan. Contoh lain ialah endless.horse, ia mungkin kelihatan mudah tetapi ia adalah contoh terbaik untuk menunjukkan kefungsian "Infinite Scrolls". Apabila anda mengakses tapak web, anda melihat seekor kuda, tetapi apabila anda menatal ke bawah halaman, anda menyedari bahawa kaki kuda itu terus membesar selama-lamanya, dan anda tidak pernah sampai ke kaki kuda itu.

Melaksanakan Tatal Infinite

Fungsi ini digunakan secara meluas dalam pembangunan moden. Kita boleh melihat tatal tak terhingga dalam tindakan pada rangkaian sosial utama, seperti Twitter, Facebook dan terutamanya Instagram, di mana kandungan nampaknya tidak pernah berakhir semasa kita menatal ke bawah halaman.

Dalam artikel ini, saya akan menunjukkan pelaksanaan asas fungsi ini. Walau bagaimanapun, pendekatan ini tidak menangani isu seperti isu dengan pertanyaan panjang, pelaksanaan caching dan penyelesaian lain yang diperlukan untuk aplikasi pengeluaran. Namun, ini adalah titik permulaan untuk memahami cara kami boleh melaksanakan ciri ini.

Langkah 1: Tentukan tempat untuk menambah fungsi tatal tak terhingga

Mula-mula, tentukan tempat anda akan menambah fungsi tatal tak terhingga. Adakah ia akan menjadi senarai siaran atau imej? Anda juga perlu memutuskan dari mana data akan datang. Untuk contoh ini, kami akan menggunakan imej daripada API asas, Random Fox API.

Langkah 2: Buat fail HTML anda

Buat fail HTML dan masukkan bekas untuk imej musang rawak anda.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Images</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="header">Fox Images</h1>
<div class="container"></div>
<script src="script.js"></script>
</body>
</html>

Langkah 3: Buat fail CSS anda

Untuk contoh ini, kami akan memastikan lembaran gaya sangat mudah.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

Langkah 4: Buat fail JavaScript anda

Pilih bekas dan dapatkan URL API Random Fox. Jangan lupa untuk memautkan fail JavaScript dan CSS anda dalam HTML.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i < numImages) {
    const img = document.createElement('img');
    img.src = `${URL}${getRandomNumber()}.jpg`;
    container.appendChild(img);
    i++;
  }
}

loadImages();

Langkah 5: Tambah Acara Tatal

Untuk melaksanakan fungsi tatal tak terhingga, tambahkan pendengar acara ini:

window.addEventListener('scroll', () => {
  if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});

Jika jumlah scrollY dan innerHeight lebih besar daripada atau sama dengan scrollHeight, ini bermakna kita telah sampai ke penghujung dokumen dan oleh itu kita perlu memuatkan lebih banyak imej.

Kesimpulan

Halaman anda kini seharusnya berfungsi dengan teknik tatal tak terhingga. Berikut ialah cabaran untuk anda: cuba buat semula projek ini menggunakan API lain pilihan anda, juga laksanakan beberapa gaya yang lebih rumit untuk memaparkan item anda. Semoga berjaya!

Atas ialah kandungan terperinci Memahami dan Melaksanakan Tatal Infinite dengan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript css html for Event

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Ujian Regresi Visual dengan Cypress dan Percy: Panduan KomprehensifArtikel seterusnya：Ujian Regresi Visual dengan Cypress dan Percy: Panduan Komprehensif

Artikel berkaitan

Lihat lagi