Saat mengembangkan Soufang Home M Station, efek tampilan album Soufang Home Decoration Rendering membutuhkan penggunaan plug-in Photoswipe untuk menampilkan gambar.
Fitur:
1. Antarmuka yang disediakan oleh rumah hanya bisa mendapatkan satu gambar sekaligus
2. Jumlah rendering dekorasi tidak terbatas.
3. Menilai dari penggunaan Photoswipe, semua gambar harus terdaftar sebelum Photoswipe diinisialisasi.
instance = photoswipe.attach (window.document.queryselectorall ('#galeri a'), opsi);
Tag A adalah sebelum inisialisasi Photoswipe, dan secara dinamis menambahkannya ke galeri tidak valid.
Solusi saat ini adalah memanggil antarmuka 10 kali pertama dan daftar 10 gambar. Setelah menampilkan 10 gambar ini, lompat ke halaman berikutnya melalui URL untuk menampilkan 10 gambar di grup berikutnya.
Keuntungan dari solusi ini adalah
1. Mudah dicapai.
Kerugiannya juga sangat jelas:
1. Setiap kali Anda melompat ke halaman berikutnya, pengguna akan menunggu lama. (10 kali antarmuka disebut + waktu ketika gambar saat ini diunduh ke klien + waktu lain)
2. Saat gambar meluncur ke kiri dan kanan, lompatan tiba -tiba ke halaman pada tahun depan juga mempengaruhi pengalaman pengguna.
Cara Mengoptimalkan Photoswipe untuk mencapai halaman dan tidak ada lompatan.
Siapa pun yang telah menggunakan Photoswipe harus mengetahui photoswipe.eventtypes.ondisplayImage. Acara ini akan dipicu setiap kali gambar ditampilkan.
instance.addeventhandler (photoswipe.eventtypes.ondisplayImage, function (e) {// menerapkan beberapa fungsi kode di sini.});Melalui penelitian, ditemukan bahwa kumpulan objek gambar yang ditampilkan dapat diakses melalui e.target.cache.images. Cara berpikir ini lebih jelas - "Pertama -tama tentukan cukup placeholder, dan kemudian terus dapatkan alamat gambar satu per satu melalui Ajax selama tampilan geser gambar, dan kemudian tetapkan gambar yang sesuai di koleksi gambar E.Target.Cache.Cache.
Kode berikut adalah implementasi metode ide ini (untuk kenyamanan menjelaskan ide ini, rincian tambahan telah dihilangkan)
<ul id = "galeri" style = "display: none;"> <!-10 berikut adalah gambar yang diperoleh dari awal melalui antarmuka-> <li> <a href = "viewImage/zxb/2014_06/30/82/82/86/pic/000711232400/800x800.jpg"> </a> </000711232400/800x800.jpg "> </a> </000711232400/800x800.jpg"> </a> </a> </a> </lia> LiE> </lia> </800x800 href = "viewImage/zxb/2014_04/18/11/94/pic/000664552500/800x800.jpg"> </a> </li> <li> <a href = "viewImage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"> </a> </li> <li> <a href = "viewImage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"> </a> </li> <li> <a href = "viewImage/zxb/2014_02/12/11/15/pic/007331476000/800x800.jpg"> </a> </li> <li> <a href = "viewImage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"> </a> </li> <!-Tag placeholder A-> <load "> </a load. href = "common_m/m_public/images/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/images/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/gambar/ href = "common_m/m_public/images/loading.gif"> </a> </li> <!-Anda dapat menambahkan beberapa placeholder tag sesuai kebutuhan-> </ul>
Dengan mendengarkan acara photoswipe.eventtypes.ondisplayImage, ubah e.target.cache.images untuk memperbaiki alamat gambar placeholder sebelum gambar diunduh.
var AimGarrindex = 0; var PicsetIndex = 10; instance.addeventhandler (photoswipe.eventTypes.ondisplayImage, function (e) {var Needetimg = e.target.cache.images [picsetIndex ++]; if (NeedsetImg) { $ .getjson ("./ index.php? C = jiaju & a = ajaxnextpicInfo & picid = {parameter picid}", fungsi (data) {var url = data [0] ["img"] gambar baru (). $ (Needetimg.metadata.item) dalam koleksi gambar photoswipe.data ('komentar', ''); // atur konten tambahan lainnya dengan cara ini})}});index.php? C = jiaju & a = ajaxnextpicInfo & picid = {parameter picid} Mengembalikan konten. Menurut berbagai picids, informasi yang relevan dari sebuah gambar dikembalikan setiap saat.
Salinan kode adalah sebagai berikut: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]]
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.