Gün geçtikten HTML5 bize javascript ile yapmış olduklarımızı deneysel API olarak ekleyerek biz kullanıcıların denemelerine sunuyorlar. Bu makalemizde ise hepimizin hemen hemen yapmış olduğu veya yapmaya çalıştığı "Lazy Load" ile ilgili bir örnek vereceğim.
Lazy Load Nedir?
Sayfa açılış hızını arttırmak için resimlere eklenirdi. Ancak HTML5 deneysel API ile beraber gelen bu özellik şuan için Chrome, Edge ve Opera‘da çalışan native bir çözüm var.
Lazy Load'ı kullanabilmemiz için yapmamız gereken;
< img> etiketine loading niteliği eklemek.
<img loading="lazy" src="test.png">Aynı zamanda onload event’ı ile de Lazy Load'ın çalışıp çalışmadığını test edebilirsiniz.
<img onload="alert('Yüklendi')" loading="lazy" src="test.png">Sayfada aşağı doğru inildiğinde resim görünür hale geldiğinde render edilir. Bu sayede sayfada görünmeyen görseller boşu boşuna sisteme yük olmaz ve sayfa açılış hızını etkilemez.
Canlı örneğine bakmak için Chrome, Edge ya da Safari‘den test ediniz.