วิธีการโหลดภาพแบบอะซิงโครนัสแบบอะซิงโครนัส

เมื่อพัฒนาสถานี Soufang Home M, Soufang Home Decoration Decoration Effect Display Effect ต้องใช้ปลั๊กอิน photoswipe เพื่อแสดงรูปภาพ

คุณสมบัติ:

1. อินเทอร์เฟซที่บ้านให้ไว้สามารถรับภาพได้ครั้งละหนึ่งภาพเท่านั้น

2. จำนวนการเรนเดอร์การตกแต่งไม่ จำกัด

3. การตัดสินจากการใช้งานของภาพถ่ายรูปภาพทั้งหมดจะต้องแสดงรายการก่อนที่จะเริ่มต้นภาพถ่าย

อินสแตนซ์ = photoswipe.attach (window.document.QuerySelectorall ('#แกลเลอรี่ a'), ตัวเลือก);

แท็ก A คือก่อนการเริ่มต้น Photoswipe และการเพิ่มลงในแกลเลอรี่แบบไดนามิกนั้นไม่ถูกต้อง

โซลูชันปัจจุบันคือการเรียกอินเทอร์เฟซ 10 ครั้งก่อนและแสดงรายการ 10 รูปภาพ หลังจากแสดงภาพ 10 ภาพเหล่านี้ให้ข้ามไปยังหน้าถัดไปผ่าน URL เพื่อแสดงภาพ 10 ภาพในกลุ่มถัดไป

ข้อดี ของโซลูชันนี้คือ

1. ง่ายต่อการบรรลุ

ข้อเสีย ก็ชัดเจนมากเช่นกัน:

1. ทุกครั้งที่คุณข้ามไปยังหน้าถัดไปผู้ใช้จะรอเป็นเวลานาน (10 เท่าของอินเทอร์เฟซเรียกว่า + เวลาที่ภาพปัจจุบันถูกดาวน์โหลดไปยังไคลเอนต์ + เวลาอื่น ๆ )

2. ในขณะที่ภาพเลื่อนไปทางซ้ายและขวาการข้ามไปที่หน้าอย่างฉับพลันในปีหน้าก็มีผลต่อประสบการณ์ของผู้ใช้

วิธีเพิ่มประสิทธิภาพการถ่ายภาพเพื่อให้ไม่ได้หน้าและไม่มีการกระโดด

ใครก็ตามที่ใช้ photoswipe ควรรู้ photoswipe.eventtypes.ondisplayimage เหตุการณ์นี้จะถูกทริกเกอร์ทุกครั้งที่มีการแสดงรูปภาพ

 Instance.addeventHandler (photoswipe.eventTypes.ondisplayimage, ฟังก์ชั่น (e) {// ใช้ฟังก์ชั่นรหัสบางอย่างที่นี่});

จากการวิจัยพบว่าการรวบรวมวัตถุภาพที่แสดงสามารถเข้าถึงได้ผ่าน e.target.cache.images วิธีการคิดนี้ชัดเจนขึ้น - "ก่อนอื่นกำหนดตัวยึดตำแหน่งเพียงพอจากนั้นรับที่อยู่ของรูปภาพทีละหนึ่งผ่าน AJAX อย่างต่อเนื่องในระหว่างการแสดงภาพการเลื่อนภาพจากนั้นกำหนดภาพที่เกี่ยวข้องใน e.target.cache.images คอลเลกชันรูปภาพ"

รหัสต่อไปนี้คือการใช้วิธีความคิดนี้ (เพื่อความสะดวกในการอธิบายความคิดนี้รายละเอียดเพิ่มเติมได้ถูกละเว้น)

 <ul id = "แกลเลอรี่" style = "จอแสดงผล: ไม่มี;"> <!-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 a href = "viewImage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"> </a> </li> <li> href = "viewImage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"> </a> </li> <li> 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/images/loading.gif"> </a> </li> <li> href = "Common_m/m_public/images/loading.gif"> </a> </li> <!-คุณสามารถเพิ่มแท็กหลายตำแหน่งตามที่ต้องการ-></ul>

โดยการฟังเหตุการณ์ photoswipe.eventTypes.ondisplayimage แก้ไข e.target.cache.images เพื่อแก้ไขที่อยู่ของภาพตัวยึดก่อนที่จะดาวน์โหลดภาพ

 var aimgarrindex = 0; var picsetIndex = 10; instance.addeventhandler (photoswipe.eventTypes.ondisplayimage, ฟังก์ชั่น (e) {var needingetimg = e.target.cache.images [picsetindex ++]; $ .getJson ("./ index.php? c = jiaju & a = ajaxnextpicinfo & picid = {พารามิเตอร์ picid}", ฟังก์ชั่น (ข้อมูล) {var url = data [0] ["img"] ภาพใหม่ () $ (uideetimg.metadata.item) ในคอลเลกชันรูปภาพของ photoswipe.data ('ความคิดเห็น', ''); // ตั้งเนื้อหาเพิ่มเติมอื่น ๆ ด้วยวิธีนี้})}});

index.php? c = jiaju & a = ajaxnextpicinfo & picid = {พารามิเตอร์ picid} ส่งคืนเนื้อหา ตาม picids ที่แตกต่างกันข้อมูลที่เกี่ยวข้องของรูปภาพจะถูกส่งกลับทุกครั้ง

การคัดลอกรหัสมีดังนี้: [{"img": http: //img1n.soufunimg.com/viewimage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg}]

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น