عند تطوير محطة Soufang Home M ، يتطلب تأثير عرض الألبوم Soufang Home Decoration تأثير استخدام المكونات الإضافية لعرض الصور.
سمات:
1. الواجهة التي يوفرها المنزل يمكن أن تحصل على صورة واحدة فقط في كل مرة
2. عدد عروض الديكور غير محدود.
3. انطلاقًا من استخدام Photoswipe ، يجب إدراج جميع الصور قبل تهيئة Photoswipe.
مثيل = PhotoGwipe.attach (window.document.queryselectorall ('#gallery a') ، reports) ؛
العلامة A هي قبل تهيئة Photoswipe ، وإضافته ديناميكيًا إلى المعرض غير صالح.
الحل الحالي هو استدعاء الواجهة 10 مرات أولاً وسرد 10 صور. بعد عرض هذه الصور العشر ، اقفز إلى الصفحة التالية من خلال عنوان URL لعرض الصور العشر في المجموعة التالية.
مزايا هذا الحل
1. من السهل تحقيقه.
العيوب هي أيضا واضحة جدا:
1. في كل مرة تقفز إلى الصفحة التالية ، سينتظر المستخدم لفترة طويلة. (10 مرات تسمى الواجهة + الوقت الذي يتم فيه تنزيل الصورة الحالية إلى العميل + وقت آخر)
2. بينما تنزلق الصورة إلى اليسار واليمين ، تؤثر القفزة المفاجئة إلى الصفحة في العام المقبل أيضًا على تجربة المستخدم.
كيفية تحسين Photoswipe لتحقيق أي صفحة ولا قفزة.
يجب أن يعرف أي شخص استخدم Photographipe. سيتم تشغيل هذا الحدث في كل مرة يتم فيها عرض صورة.
مثيل.
من خلال البحث ، وجد أنه يمكن الوصول إلى مجموعة كائنات الصور المعروضة من خلال e.target.cache.images. هذه الطريقة في التفكير أكثر وضوحًا - "حدد أولاً ما يكفي من العناصر النائبة ، ثم الحصول على عنوان الصورة واحدة تلو الأخرى عبر Ajax أثناء العرض المنزلق للصورة ، ثم قم بتعيين الصورة المقابلة في مجموعة الصور e.target.cache.ims.".
الرمز التالي هو تنفيذ طريقة الفكرة هذه (لراحة شرح هذه الفكرة ، تم حذف التفاصيل الإضافية)
<ul id = "gallery" style = "display: none ؛"> <!-10 هي الصور التي تم الحصول عليها من البداية عبر الواجهة-> <li> <a href = "viewimage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg"> 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/13/15/pic/007331476000/800x800.jpg"> </a> </li> <li> <a HREF = "ViewImage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"> </a> </li> <!-ما يلي هو صاحب المكان-> href = "common_m/m_public/images/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/images href = "common_m/m_public/images/loading.gif"> </a> </li> <!-يمكنك إضافة علامات نائبة متعددة كما هو مطلوب-> </ul>
من خلال الاستماع إلى الحدث Photoswipe.EventTypes.OndisPlayImage ، تعديل e.target.cache.images لتصحيح عنوان صورة العنصر النائب قبل تنزيل الصورة.
var aimgarrindex = 0 ؛ var picsetIndex = 10 ؛ مثيل. $ .getjson ("./ index.php؟ c = jiaju & a = ajaxnextpicinfo & picid = {picid parameter}" ، function (data) {var url = data [0] ["img"] new Image (). src = url ؛ $ (NeedetImg.Metadata.item) في مجموعة الصور من Photoswipe.data ("التعليق" ، '') ؛ // تعيين محتويات إضافية أخرى بهذه الطريقة})}}) ؛index.php؟ c = jiaju & a = ajaxnextpicinfo & picid = {picid parameter} إرجاع المحتوى. وفقًا لمختلف picids ، يتم إرجاع المعلومات ذات الصلة للصورة في كل مرة.
نسخة الكود كما يلي: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.