Svelte ve Tailwind Ile Infinite Scroll Yapma Yontemi
Yayın: 30 Nisan 2024
Bu blog yazısında, Svelte ve Tailwind kullanarak sonsuz kaydırma özelliğine sahip bir HTML öğesi nasıl oluşturulur, keşfedin.
Öncelikle, sabit bir yüksekliğe ve altında taşan bir içeriğe sahip bir div öğesi oluşturalım.
Aşağıdaki kodu kullanarak, kullanıcının konteyner içinde ne kadar daha kaydırabileceğini kontrol edebiliriz. Yukarıda gösterildiği gibi, bunu konteynerin sağ üst köşesine koyuyoruz.
<script>
let container;
function getScroll() {
scrollableHeight = container.scrollHeight - (container.scrollTop + container.clientHeight);
}
</script>
<div class="relative">
<p class="absolute">{scrollableHeight}</p>
<div bind:this={container} on:scroll={getScroll}>
<img src="Doggie1.jpg"/>
<img src="Doggie2.jpg"/>
<img src="Doggie3.jpg"/>
</div>
</div>
İşler ilginç hale gelsin. Artık kullanıcının ne kadar daha piksel kaydırabileceğini
izleyebiliyoruz (scrollableHeight), kullanıcının tüm mevcut içeriği kaydırıp
kaydırmadığını kontrol edebiliriz.
Tüm içerik kaydırıldığında, resim API'ye bir çağrı yaparız ve yeni bir resim alırız. Yeni resim yüklenirken, kullanıcıya hoş bir şekilde yüklenme işaretini gösterelim.
Aşağıda sonsuz kaydırılabilir HTML öğesi bulunmaktadır. Tüm köpek resimleri görüldüğünde, Dog Pic API 'ye bir çağrı yaparız ve yeni bir resim alırız.
Bu yeni resim, API'den alınır, yüklenir ve konteynıra eklenir. Bunlar olurken, API'ye yeni çağrılar yapmayı devre dışı bırakırız.
Aşağıda kod bulunmaktadır:
<script>
let fetchingImage; // Değişken, resmin alınıp alınmadığını kontrol eder
let tolerance = 5; // İçerik 5 piksel yaklaşınca içeriğin sonunu tespit et
let image = new Image(); // Görüntüyü başlat
// İlk 3 resmi başlat
let sources = [
'https://images.dog.ceo/breeds/sheepdog-english/n02105641_3540.jpg',
'https://images.dog.ceo/breeds/husky/n02110185_7936.jpg',
'https://images.dog.ceo/breeds/terrier-lakeland/n02095570_3224.jpg'
];
// Görüntü bağlantılarını HTML img öğelerine eşle
images = sources.map((src) => {
img = image.cloneNode(true);
img.src = src;
return img.outerHTML;
});
async function handleScroll() {
if (!fetchingImage && container.scrollTop + container.clientHeight > container.scrollHeight - tolerance) {
fetchingImage = true;
let response = await fetch('https://dog.ceo/api/breeds/image/random'); // API'ye bir çağrı yap
let doggie = await response.json();
img = image.cloneNode(true);
img.onload = function () { // Görüntü yüklenene kadar bekle
fetchingImage = false; // Görüntünün yüklendiğini kontrol et
};
// API'den alınan bağlantıyı src olarak atayın
img.src = doggie.message;
// Yeni resmi images dizisine ekleyin. Bu dizi konteynırı doldurur
images = [...images, img.outerHTML];
}
}
</script>
<div class="relative">
<div bind:this={container} on:scroll={handleScroll}>
{#each images as img}
{@html img}
{/each}
{#if fetchingImage}
<LoadingIcon />
{/if}
</div>
</div>
Yukarıdaki kod ile aşağıdaki konteyneri oluşturabiliriz, sonsuz kaydırma özelliğine sahip. Konteynerin altına ulaştığınızda, bir API çağrısı yapılır ve yeni bir köpek resmi eklenir. Bu sayede sonsuz bir şekilde köpek resimlerine bakabilirsiniz. Kulağa cennet gibi geliyor değil mi?
Sorunuz varsa bana bildirin.
Keyifli kodlamalar!
Bu blog İngilizce'den ChatGPT ile çevrilmiştir. Herhangi bir belirsizlik durumunda İletişim sayfasından bana ulaşabilirsiniz.
Yorum bırak
Yorumlar
Diğer bloglara bak
2024/06/19
Svelte ve JavaScript ile Basit ve Dinamik Bir Tooltip Yaratma Yöntemi
2024/06/17
JavaScript ile Tokyo'nun İnteraktif Haritasını Oluşturun
2024/06/14
Matplotlib'de Japonca Karakter Sorununu Çözme Yöntemi
2024/06/13
Kitap İncelemesi | Ötekiyle Konuşmak by Malcolm Gladwell
2024/06/07
Japonca'da En Sık Kullanılan 3.000 Kanji
2024/06/07
VSCode'da Regex Kullanarak Replace Yapma Yöntemi
2024/06/06
Svelte'de Readable Store Kullanmayın
2024/06/05
Dosyaları Gzip ve Pako ile Sıkıştırarak Web Sitesinin Yükleme Hızını Artırın
2024/05/31
Web Sayfasında Farenin Uzerinde Oldugu Kelimeyi JavaScript ile Bulun
2024/05/29
Svelte ve SVG ile Interaktif Harita Oluşturun
2024/05/28
Kitap İncelemesi | Geleneklere Uymayanlar Dünyayı Nasıl İleri Taşıyor? by Adam Grant & Sheryl Sandberg
2024/05/27
Javascript Kullanarak Sudoku Nasıl Çözülür?
2024/05/26
Web Siteme Gelen Trafiği Bir Ayda Nasıl 10 Kat Artırdım?
2024/05/24
Hayat Bisiklet Sürmek Gibidir
2024/05/19
JavaScript'te Backtracking Algoritması ile Tamamlanmış Sudoku Oluşturun
2024/05/16
Tailwind Neden Harikadır ve Web Geliştirmeyi Nasıl Kolay Hale Getirir?
2024/05/15
Python ve Git Hooks ile Otomatik Olarak Site Haritası Oluşturma
2024/05/14
Kitap İncelemesi | Çok Yönlü - Başarı İçin Neden Çok Şeyle İlgilenmeliyiz? by David Epstein
2024/05/13
Svelte ve SvelteKit nedir?
2024/05/12
SvelteKit ile Internationalization (Çoklu Dil Desteği)
2024/05/11
Svelte'de Caching ile Deploy Süresini Azaltın
2024/05/10
Svelte ve Intersection Oberver ile Lazy-Load
2024/05/10
Genetik Algoritma İle Hisse Senedi Portföyü Optimizasyonu
2024/05/09
ShapeFile Formatini SVG Formatina Degistirme Yontemi
2024/05/08
Svelte'de Reaktivite: Variables, Binding, ve Key Fonksiyonu
2024/05/07
Kitap İncelemesi | Savaş Sanatı - Sun Tzu
2024/05/06
Specialistlik Bitti. Yaşasın Generalistlik!
2024/05/03
2018 Milletvekili Seçimlerinde Yaşa Göre Parti Eğilimi
2024/05/01
Python Selenium Ile Secmen Veritabani Olusturma
2024/04/29
1 Yıl İçerisinde Japonca Konuşabilmek
2024/04/25
Svelte ve Tailwind ile Kullanıma Hazır Web Sitesi Şablonu
2024/01/29
Tembel Muhendisler Kotu Urunler Yapar
2024/01/28
Mukemmellik Uzerine
2024/01/28
MacBook'ta PDF'i PNG'ye Cevirme Yontemi
2023/12/31
2023'u Kapatiyoruz: Bu Yil Okunan 24 Kitap
2023/12/30
Python PIL Kullarak Foto Kolaji Yapma Yontemi
2024/01/09
Site Ziyaretcilerinin Alet ve Tarayicilarini Tespit Etme Yontemi
2024/01/19
ChatGPT Cevap Anatomisi