Loadr, penyelesaian yang cekap untuk memuatkan imej besar dalam HTML dengan lancar

bagaimana ia berfungsi:

ia memuatkan imej beresolusi rendah terlebih dahulu daripada img src kemudian dalam atrbute hr-src ia memuatkan imej beresolusi tinggi di latar belakang yang sekali dimuatkan menggantikan url beresolusi rendah dengan yang beresolusi tinggi.

Lihat repo yang bintang akan menjadi Hebat

Demo

Pemasangan

CDN

Import Loadr menggunakan CDN.

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

? Versi Tertentu

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

Penggunaan

Tambahkan hr-src pada HTML elemen, Ini akan menjadi imej resolusi tinggi anda. Dalam atribut src ialah versi resolusi rendah imej anda. Loadr akan memuatkan imej resolusi tinggi di latar belakang kemudian mengemas kini src dengan URLnya, Menggantikan imej resolusi rendah.

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

Panggil Loadr dalam Javascript anda. Itu sahaja?.

index.html

<script>
  new Loadr();
</script>

Lihat Demo di Codepen.

Langkah tambahan

Mari tambahkan sedikit penggayaan pada elemen.

style.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

Penyesuaian

Loadr disertakan dengan pembolehubah yang boleh disesuaikan dengan mudah.

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

Lihat Demo Penyesuaian pada Codepen.

Atas ialah kandungan terperinci Loadr, penyelesaian yang cekap untuk memuatkan imej besar dalam HTML dengan lancar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!