Çizgi romanlar üzerine kendi sitemi kodlamaktayım, şu anda bölümleri okuma sayfasını yapıyorum. Alt alta 10'dan fazla resmin bulunduğu insanların aşağıya kaydırarak bölümü okuyabildikleri bir sayfa yapısı, ve bölümler bazen 40mb'ın üstüne çıktığı için de lazyload sistemi yaptım.
Fakat bu sektörde paragöz insanlar sürekli bölümleri çalarak kendi sitelerinde yayınlıyor. Bunu olabildiğince zorlaştırmak için biraz araştırma yaptım ve img taglarını canvas'a dönüştürmenin oldukça etkili olduğunu ve hazır kodlanmış bir çok indirme programını da engellediğini gördüm. Fakat lazyload sistemini canvas'a çevirmekte güçlük çekiyorum.
Lazyload için yaptığım kodlama:
HTML:
<div class="icerik-bolum_sayfalar"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/0.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 0"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/1.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 1"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/2.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 2"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/3.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 3"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/4.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 4"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/5.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 5"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/6.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 6"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/7.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 7"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/8.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 8"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/9.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 9"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/10.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 10"> <img class="icerik-bolum_sayfa" data-src="resim/bolum/11.jpg" alt="God of Blackfield - Bölüm 78 - Sayfa 11"> </div>Javascript:
// !! Lazy Load Sayfalar [Başlangıç]
const sayfa = document.querySelectorAll("[data-src]");
function yarıYuklenmisGorsel(img) {
const src = img.dataset.src;
if (!src) {
return;
}
img.src = src;
}
const imgAyarlari = {
threshold: 0,
rootMargin: "0px 0px 140px 0px",
};
const imgGozleyen = new IntersectionObserver((girdiler, imgGozleyen) => {
girdiler.forEach((girdi) => {
if (!girdi.isIntersecting) {
return;
} else {
yarıYuklenmisGorsel(girdi.target);
imgGozleyen.unobserve(girdi.target);
}
});
}, imgAyarlari);
sayfa.forEach((gorsel) => imgGozleyen.observe(gorsel));
// !! Lazy Load Sayfalar [BİTİŞ]Bunu canvas'lara entegre etmek için bana yardımcı olabilir misiniz? İsteğimi açıkça belirtmek için aşağıya bir örnek görsel atacağım:
