การอภิปรายการประมวลผลภาพ Taobao
หน้าของ Taobao มีขนาดใหญ่มาก แต่เปิดเร็วมาก การประมวลผลภาพใช้การโหลดสกรอลซึ่งหมายถึงตำแหน่งที่แกนเลื่อนม้วนและที่โหลดภาพ แต่ถ้าคุณต้องการตรวจสอบซอร์สโค้ดมันจะต้องใช้ความพยายามอย่างมากเนื่องจากการบีบอัดรหัสและการรวมของพวกเขาทำได้ดี! เนื่องจากภาพถูกโหลดในการเลื่อนและภาพไม่ได้โหลดระหว่างการเริ่มต้นจากนั้นเมื่อคุณรีเฟรชหน้าที่ด้านล่างของหน้าหน้าด้านล่างมักจะไม่ถูกโหลด แนวทางของ Taobao ดูเหมือนจะเป็น (เพราะฉันไม่ได้ดูซอร์สโค้ดของพวกเขาเพียงแค่ใช้การดำเนินการ), สดชื่นเพื่อนำหน้ากลับไปด้านบน
เลียนแบบ Taobao และเลื่อนรูปภาพเพื่อโหลด
นี่คือสามวิธีในการคิด:
1. JavaScript ขี้เกียจโหลดพื้นที่ภาพ
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> harooms ส่วนหน้าบล็อก-พื้นที่การโหลด javascript </title> <style> img {width: 100%; margin-bottom: 30px; ต่ำสุด: 400px; พื้นหลังสี: #ddd;} </style> </head> <body> <img haroomslazyload = "chrysanthemum.jpg" src = ""> <img haroomslazyload = "desert.jpg" src = ""> haroomslazyload = "hydrangeas.jpg" src = ""> <img haroomslazyload = "koala.jpg" src = ""> <img haroomslazyload = "Lighthouse.jpg" src = ""> haroomslazyload = "tulips.jpg" src = ""> <script> var imgnum = document.getElementsByTagname ('img') ความยาว; var imgobj = document.getElementsByTagname ("IMG"); var l = 0; window.onscroll = function () {var seeheight = document.documentelement.clientheight; var scrolltop = document.documentelement.scrolltop || document.body.scrolltop; สำหรับ (var i = l; i <imgnum; i ++) {ถ้า (imgoBj [i] .offSettop <seedheight+scrolltop) {console.log (imgobj [i] .getAttribute ("src")); console.log (imgobj [i] .src); ถ้า (imgoBj [i] .getAttribute ("src") == "") {imgoBj [i] .src = imgobj [i] .getAttribute ("haoroomslazyload"); }} if (imgoBj [i] .offSettop> SEEHEIGHT + SCROLLTOP) {L = I; หยุดพัก; }}}} </script>โปรดให้ความสนใจกับเอาท์พุทคอนโซลสองตัวของฉันคือ console.log (imgobj [i] .src); เพื่อรับที่อยู่เบราว์เซอร์ทั้งหมด!
2. jQuery ขี้เกียจโหลดพื้นที่ภาพการโหลด
JS ข้างต้นแปลด้วย jQuery!
var l = 0 // JS วิธีการแปลเวอร์ชัน $ (หน้าต่าง). -bind ("Scroll", ฟังก์ชั่น (เหตุการณ์) {สำหรับ (var i = l; i <$ ("img"). ความยาว; i ++) {ถ้า ($ ("img") eq (i) .offset () if ($ ("img"). eq (i) .attr ("src") == "") {var lazyloadsrc = $ ('img') eq (i) .attr ("haoroomslazyload"); if ($ ("img"). eq (i) .offset (). top> parseint ($ (window) .height ()) + parseint ($ (window) .scrolltop ())) {l = i;3. ส่วนขยายการโหลดพื้นที่ภาพ
ตัวอย่างเช่นเอฟเฟกต์ภาพเคลื่อนไหวหรือภาพผืนผ้าใบเอฟเฟกต์ที่ฉันต้องการบรรลุคือมันไม่ได้โหลดในตอนแรก เมื่อเลื่อนไปยังแอนิเมชั่นหรือแผนภูมิมันจะถูกโหลด จากนั้นเราสามารถทำการปรับปรุงต่อไปนี้ตามรหัสด้านบน:
$ (หน้าต่าง). -bind ("Scroll", ฟังก์ชั่น (เหตุการณ์) {// ความสูงของหน้าต่าง + ความสูงของด้านบนที่มองไม่เห็น = ความสูงของส่วนล่างของหน้าจอจากด้านบน var thisbuttomtop = parseint ($ (หน้าต่าง) .Height ()) ด้านบนของหน้าจอจากด้านบน picturetop = parseint ($ (window) .offset (). ด้านบน); ดำเนินการฟังก์ชั่นการโหลดของคุณที่นี่และฟังก์ชั่นการโหลดจะถูกย้ายจากเอกสารต้นฉบับพร้อมที่นี่!}})รีเฟรชกลับไปด้านบน
เมื่อเราทำการโหลดพื้นที่ภาพเรามักจะปล่อยให้มันรีเฟรชกลับไปด้านบน เหมือน Taobao รีเฟรชกลับไปด้านบน
ฉันไม่รู้ว่า Taobao ทำได้อย่างไร รีเฟรชกลับไปที่ด้านบนฉันใช้เหตุการณ์ OnBeforeunload
onbeforeunload และ onunload เหตุการณ์ onunload และ onbeforeunload เรียกว่าทั้งคู่เมื่อสดชื่นหรือปิด สามารถระบุได้ในสคริปต์ <script> ผ่าน window.onunload หรือใน <body> ความแตกต่างคือ OnBeforeUnload ดำเนินการก่อน ONUNLOAD มันยังสามารถป้องกันการดำเนินการของ ONUNLOW
OnBeForeunload เรียกอีกอย่างว่าหน้าจะรีเฟรชหรือปิด OnBeforeUnload ถูกเรียกเมื่อกำลังจะไปที่เซิร์ฟเวอร์เพื่ออ่านหน้าใหม่ แต่ยังไม่ได้เริ่มอ่าน Onunload ได้อ่านหน้าใหม่ที่ต้องโหลดจากเซิร์ฟเวอร์และเรียกว่าเมื่อหน้าปัจจุบันกำลังจะถูกแทนที่ Onunload ไม่สามารถป้องกันการอัปเดตและปิดหน้าเว็บได้ และ OnBeforeunload สามารถทำได้
1. มีการดำเนินการเฉพาะ OnLoad เท่านั้นเมื่อโหลดหน้าเว็บ
2. เมื่อปิดหน้า
3. เมื่อรีเฟรชหน้าก่อนจะดำเนินการ onbeforeunload ก่อนจากนั้น onunload และในที่สุด onload
การรีเฟรชกลับไปด้านบนคือการใช้กิจกรรมนี้คุณสามารถเขียนได้เช่นนี้
window.onbeforeunload = function () {$ (window) .scrolltop (0);}เมื่อมีการใช้รูปภาพทั้งหมดในเว็บไซต์ แต่มีการโหลดพื้นที่และ CSS และ JS ถูกรวมเข้าด้วยกันและบีบอัดความเร็วและประสิทธิภาพของเว็บไซต์ของเราจะดีขึ้นมาก!
หากคุณต้องการทำเช่น Taobao คุณสามารถปรับปรุงรหัสได้
ในความเป็นจริงแนวคิดของการโหลดล่าช้าคือการวางภาพในข้อมูล SRC หรือคุณสมบัติก่อน เมื่อหน้าเลื่อนเข้าไปในพื้นที่ภาพให้กำหนดที่อยู่ภาพที่เก็บไว้ให้กับ SRC
ฉันจะไม่แสดงรายการรหัสที่นี่