1. PENDAHULUAN LATAR BELAKANG
Dalam aplikasi album foto online, kebutuhan paling sederhana pengguna untuk melihat foto. Ketika jaringan lebih lambat, waktu tunggu untuk melihat foto relatif lama, dan pengalaman pengguna akan sangat buruk.
2. Situasi saat ini
Ada dua cara utama untuk memuat foto:
(1) Cara paling asli untuk secara langsung memuat dan menampilkan foto pada halaman HTML dengan tag IMG. Metode ini akan memiliki proses menunggu kosong ketika kecepatan jaringan lambat atau foto yang akan ditampilkan relatif besar, dan pengalaman pengguna akan buruk.
(2) Pertama gunakan tag IMG untuk memuat thumbnail foto untuk menampilkan foto pada halaman HTML, dan kemudian gunakan JavaScript untuk memuat gambar asli foto yang tersembunyi, dan tunggu sampai gambar besar foto dimuat sebelum menampilkan gambar asli ke halaman. Berikut ini adalah diagram alur:
3. Solusi kami
Beberapa metode optimasi yang baru -baru ini dibuat oleh album foto QQ telah memecahkan kekurangan dari dua metode banding dan memenuhi kebutuhan pengguna untuk melihat foto: lihat situasi umum foto sesegera mungkin dan lihat gambar asli yang jelas secepat mungkin. Metode ini menggunakan thumbnail dan gambar asli untuk memuat dan overlay display secara bersamaan. Pertama, muat thumbnail dan perluas tampilan, dan gambar besar ditumpangkan pada thumbnail dan muat secara bersamaan. Thumbnail sangat kecil dan biasanya memungkinkan pengguna untuk dengan cepat melihat gambar kabur. Selama pemuatan gambar besar, thumbnail secara bertahap ditutup dari atas ke bawah, sehingga pengguna dapat melihat gambar besar selama proses pemuatan.
(1) Contoh diagram
Seperti yang ditunjukkan di atas, langkah pemrosesan metode ini adalah:
1). Dapatkan URL dari thumbnail foto dan gambar asli, dan dapatkan panjang dan lebar foto;
2). Muat dan tampilkan gambar thumbnail foto, dan rentangkan thumbnail sesuai dengan panjang dan lebar film. Pada saat ini, pengguna melihat efek kabur;
3). Muat dan tampilkan foto asli, menempatkan gambar asli pada thumbnail untuk menampilkannya. Gambar asli akan ditampilkan sebanyak yang dimuat. Jika tidak dimuat, itu masih akan menampilkan thumbnail. Secara bertahap menimpa thumbnail. Selama proses pemuatan gambar asli, pengguna melihat efek gradien dari foto dari blur untuk membersihkan.
4). Setelah gambar asli dimuat, gambar asli telah menimpa thumbnail, dan pengguna melihat gambar asli yang asli. Pada saat ini, Anda dapat menyembunyikan thumbnail untuk mencegah thumbnail mengganggu tampilan gambar dengan efek transparan seperti PNG atau GIF.
(2) Kode sampel
<!-Atur ukuran foto-> <ver> <!-Gambar kecil ditampilkan dalam ukuran besar-> <img src = "small_url"/> <!-gambar aslinya ditumpangkan pada gambar kecil-> <img src = "Big_url"/> </div>
Di atas adalah seluruh konten artikel ini. Untuk informasi lebih lanjut tentang JavaScript, Anda dapat memeriksa: "Tutorial Referensi JavaScript" dan "Panduan Gaya Kode JavaScript". Saya juga berharap semua orang akan lebih mendukung wulin.com.