Rumah >hujung hadapan web >tutorial js >Tiga kaedah utama untuk mencapai pramuat imej dan analisis kelebihan dan kekurangan mereka kemahiran_javascript

Tiga kaedah utama untuk mencapai pramuat imej dan analisis kelebihan dan kekurangan mereka kemahiran_javascript

WBOYasal: 2016-05-16 16:30:521511semak imbas

Pramuat imej ialah cara terbaik untuk meningkatkan pengalaman pengguna. Dengan imej yang dipramuat ke dalam penyemak imbas, pelawat boleh melayari tapak anda dengan lancar dan menikmati masa pemuatan yang sangat pantas. Ini sangat berfaedah untuk galeri imej dan tapak web di mana imej mengambil bahagian yang besar Ia memastikan imej diterbitkan dengan cepat dan lancar, dan ia juga membantu pengguna mendapatkan pengalaman pengguna yang lebih baik apabila menyemak imbas kandungan tapak web anda. Artikel ini akan berkongsi tiga teknik pramuat yang berbeza untuk meningkatkan prestasi dan kebolehgunaan tapak web.

Kaedah 1: Gunakan CSS dan JavaScript untuk melaksanakan pramuat

Terdapat banyak cara untuk melaksanakan imej pramuat, termasuk menggunakan CSS, JavaScript dan pelbagai kombinasi kedua-duanya. Teknologi ini boleh mereka bentuk penyelesaian yang sepadan mengikut senario reka bentuk yang berbeza dan sangat cekap.
Hanya menggunakan CSS, anda boleh pramuat imej dengan mudah dan cekap Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; #preload-02 { background: url(
http://domain.tld/image-02.png) no-repeat -9999px -9999px; #preload-03 { background: url(http://domain.tld/image-03.png
) no-repeat -9999px -9999px;
Menggunakan tiga pemilih ID ini pada elemen HTML (X), kami boleh pramuat imej ke latar belakang luar skrin melalui atribut latar belakang CSS. Selagi laluan ke imej ini kekal sama, penyemak imbas akan menggunakan imej yang dipramuat (cache) semasa proses pemaparan apabila ia dipanggil di tempat lain pada halaman web. Mudah, cekap dan tidak memerlukan sebarang JavaScript.

Walaupun kaedah ini cekap, masih terdapat ruang untuk penambahbaikan. Imej yang dimuatkan menggunakan kaedah ini akan dimuatkan bersama-sama dengan kandungan lain pada halaman, meningkatkan masa pemuatan keseluruhan halaman. Untuk menyelesaikan masalah ini, kami menambahkan beberapa kod JavaScript untuk menangguhkan masa pramuat sehingga halaman dimuatkan. Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut: // pramuat imej yang lebih baik @ http: //perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/> function preloader() {
Jika (document.getElementById) {          document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png
) no-repeat -9999px -9999px";
         document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
         document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
} } fungsi addLoadEvent(func) {
var oldonload = window.onload; Jika (jenis window.onload != 'function') {
window.onload = func; } lain {
Window.onload = Fungsi () {
Jika (oldonload) {
                        beban lama();                                                                                                                               fungsi();                                                                                                                                  }
}
addLoadEvent(pramuat);

Dalam bahagian pertama skrip, kami mendapat elemen menggunakan pemilih kelas dan menetapkan atribut latar belakang padanya untuk pramuat imej yang berbeza.
Dalam bahagian kedua skrip, kami menggunakan fungsi addLoadEvent() untuk menangguhkan masa pemuatan fungsi preloader() sehingga halaman dimuatkan.
Apakah yang berlaku jika JavaScript tidak berjalan dengan betul dalam penyemak imbas pengguna? Ia sangat mudah. Imej tidak akan dimuatkan apabila halaman memanggil imej, ia akan dipaparkan seperti biasa.

Kaedah 2: Gunakan JavaScript sahaja untuk melaksanakan pramuat

Kaedah di atas kadangkala sangat cekap, tetapi kami secara beransur-ansur mendapati bahawa ia akan mengambil terlalu banyak masa dalam proses pelaksanaan sebenar. Sebaliknya, saya lebih suka menggunakan JavaScript tulen untuk pramuat imej. Di bawah ialah dua kaedah pramuat sedemikian yang berfungsi dengan baik pada semua penyemak imbas moden.

coretan JavaScript 1
Hanya edit dan muatkan laluan dan nama imej yang diperlukan, ia mudah untuk dilaksanakan:

Salin kod Kod adalah seperti berikut: