ตัวโหลดหน้าล่วงหน้า เราสร้างตัวโหลดล่วงหน้า JS เต็มรูปแบบสำหรับแอปพลิเคชัน AJAX การเพิ่มฟังก์ชันการทำงานให้กับตัวโหลดล่วงหน้า

สวัสดีเพื่อนๆ. มันเกิดขึ้นเนื่องจากการใช้ปลั๊กอินจำนวนมากทำให้ไซต์ใช้เวลานานในการโหลดอย่างไม่อาจยอมรับได้ ในกรณีเช่นนี้ ฉันแนะนำให้กำจัดมันทิ้งไปหรือมองหาอะนาล็อกที่ "หนัก" น้อยกว่า แต่บางครั้งก็ไม่ได้อยู่ที่นั่น ในกรณีนี้ คุณสามารถลองใช้ตัวโหลดล่วงหน้าเพื่อสร้างความบันเทิง (กวนใจ) ผู้ใช้เล็กน้อย แต่ไม่ใช่ทุกคนที่รู้วิธีการใช้งานฟังก์ชันดังกล่าว...

ก่อนอื่น เป็นเรื่องน่าสังเกตว่าแนะนำให้ใช้ตัวโหลดล่วงหน้าในกรณีที่ต้องใช้เวลานานในการโหลด หน้าจอหลักหรือเมื่อเนื้อหาถูกโหลดเป็นชิ้นๆ ทั้งหมดนี้อาจทำให้ผู้ใช้ออกจากไซต์ทันทีหรือสร้างความประทับใจเชิงลบต่อบริษัทโดยรวม

ก่อนที่คุณจะเริ่มสร้างตัวโหลดล่วงหน้า คุณต้องเข้าใจเล็กน้อยเกี่ยวกับวิธีที่เบราว์เซอร์โหลดหน้าเว็บ ฉันจะไม่อธิบายวงจรทั้งหมด เนื่องจากฉันมีความคิดที่ค่อนข้างเป็นนามธรรม แต่สิ่งสำคัญคือต้องเข้าใจว่าเพื่อประหยัดเวลา เบราว์เซอร์จะโหลด (แสดง) โค้ดทีละขั้นตอน และไม่รอให้หน้าเว็บเต็ม โหลด และหากเชื่อมต่อ js แล้ว มันจะหยุดโหลดพร้อมกันจนกว่าจะไม่สามารถเรียกใช้งานไฟล์ที่รวมอยู่ได้ ซึ่งหมายความว่าการโหลด (การแสดงผล) ของเนื้อหาที่เหลือจะถูกระงับจนกว่าไฟล์ js จะโหลดเต็ม โดยทั่วไปยังมีปัญหาอยู่พอสมควร เรามาลองแก้ไขโดยใช้ตัวโหลดล่วงหน้ากันดีกว่า

ต่อไปนี้เป็นคำสองสามคำเพื่อทำความเข้าใจสิ่งที่เรากำลังทำ:

• ในตอนแรกเราวาง div ด้วยตัวโหลดล่วงหน้า
• เราใช้ตัวโหลดล่วงหน้าเพื่อซ่อนเนื้อหาของเว็บไซต์จนกว่าหน้าจะโหลดเต็ม
• ซ่อนตัวโหลดล่วงหน้าและแสดงเพจ

ตอนนี้ทันทีหลังจากเปิดแท็ก body ให้วาง div ต่อไปนี้:

เป็นไปได้มากว่าหากคุณมีปัญหาในการโหลดไซต์ของคุณ นั่นหมายความว่าคุณมีรูปภาพคุณภาพสูงจำนวนมากและสคริปต์ที่มีน้ำหนักมาก ซึ่งหมายความว่าคุณอาจใช้ jQuery อยู่ ดังนั้นเพื่อให้ตัวโหลดล่วงหน้าของเราหายไปหลังจากเนื้อหาหลักได้ โหลดแล้วเราจะใช้สคริปต์ต่อไปนี้:

$(window).on("load", function () ( $preloader = $(".loaderArea"), $loader = $preloader.find(".loader"); $loader.fadeOut(); $preloader. ล่าช้า(350).fadeOut("ช้า" ));

วางไว้ที่ไหนสักแห่งหลังจากรวม jQuery แล้ว

ให้ฉันอธิบาย html เล็กน้อย LoaderArea เป็นพื้นที่พื้นหลังที่ทับซ้อนเนื้อหาหลัก CSS สำหรับ div นี้คือ:

LoaderArea ( พื้นหลัง: การไล่ระดับสีเชิงเส้น (90deg, #FF4E50 10%, #F9D423 90%); ล้น: ซ่อน; ตำแหน่ง: คงที่; ซ้าย: 0; บน: 0; ขวา: 0; ล่าง: 0; ดัชนี z: 100000 ; )

ตัวโหลดคือพื้นที่ใช้งาน (ตัวโหลดล่วงหน้าเอง) เนื่องจากฉันตัดสินใจสร้างโดยใช้ CSS เท่านั้น จึงมีสไตล์ดังต่อไปนี้:

ตัวโหลด ( ความสูง: 40px; ความกว้าง: 40px; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; ขอบซ้าย: -20px; บน: 50%; ขอบบน: -20px; ) .loader:before, .loader:after ( เนื้อหา : ""; ความกว้าง: 40px; เส้นขอบ: 8px ทึบ rgba (255,255,255,.5); รัศมีเส้นขอบ: สัมบูรณ์; ด้านบน: เคลื่อนไหว 2s ; (0); ) 100% ( การแปลง: หมุน (180deg) เอียง (360deg); ) .loader: หลัง ( ภาพเคลื่อนไหว: animate2 2s เชิงเส้นไม่มีที่สิ้นสุด; ) @keyframes animate2 ( 0% ( การแปลง: หมุน (0) เอียง (0) ; ) 100% ( การแปลง: หมุน(-180deg) เอียง(-360deg); ) )

ฉันใช้แหล่งตัวโหลดล่วงหน้าจาก Codepeen นี่คือลิงค์ไปยังตัวเลือกที่น่าสนใจ

วันนี้เราจะพูดถึงวิธีซ่อนการโหลดเว็บไซต์บน WordPress โดยใช้ตัวโหลดล่วงหน้า เราเคยเห็นไซต์ที่แสดงภาพเคลื่อนไหวแทนหน้าจอโหลดสีขาว เคล็ดลับเล็กๆ น้อยๆ นี้สามารถช่วยได้หากไซต์ของคุณโหลดช้า แต่คุณยังต้องการรักษาผู้ใช้ที่ใจร้อนที่ไม่ชอบจ้องหน้าว่างนานเกินไป หน้าจอสีขาวเฝ้าสังเกต. เอาล่ะ ไปเพิ่มตัวโหลดล่วงหน้าสำหรับไซต์ WordPress กันดีกว่า

ก่อนที่ฉันจะเริ่มอธิบายปลั๊กอินและวิธีการทำงาน ฉันขอแนะนำอย่างยิ่ง เฉพาะในกรณีที่คำแนะนำข้างต้นทั้งหมดไม่สามารถช่วยได้ ความหวังทั้งหมดก็อยู่ที่ตัวโหลดล่วงหน้า และผลกระทบต่อความอดทนของผู้ใช้ไซต์

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

ฉันเป็นฝ่ายตรงข้ามของเครื่องมือนี้ ฉันเชื่อว่าการเพิ่มประสิทธิภาพการโหลดไซต์จะดีกว่าการติดตั้งตัวโหลดล่วงหน้า ตามความเข้าใจของฉัน เฉพาะพอร์ทัลขนาดใหญ่ ร้านค้าออนไลน์ และบริการออนไลน์ที่มีฐานข้อมูลขนาดใหญ่ที่ประมวลผลข้อมูลนับล้านรายการจำเป็นต้องใช้ตัวโหลดล่วงหน้าเท่านั้น และไม่มีทางที่จะเร่งความเร็วในการโหลดได้ นี่เป็นความเห็นส่วนตัวของฉันและคุณอาจไม่เห็นด้วย

ตามสถิติ หากไซต์ใช้เวลาโหลดมากกว่า 4 วินาที มีความเป็นไปได้สูงที่จะเกิดความล้มเหลว ผู้ใช้อาจออกจากไซต์โดยไม่ต้องรอให้โหลดจนเต็ม และนี่เป็นตัวบ่งชี้ที่แย่มาก ด้วยการเพิ่มประสิทธิภาพตามปกตินั้นไม่เหมาะนัก แต่ถึงกระนั้นไซต์ของฉันก็โหลดใน 2-3 วินาทีและตัวบ่งชี้นี้เหมาะกับฉันค่อนข้างดีและตามที่สถิติผู้ใช้แสดงเช่นกัน นั่นเป็นเหตุผลที่ฉันพูดอีกครั้งว่าเมื่อไซต์โหลดช้า คุณต้องมีการปรับให้เหมาะสม ไม่ใช่ตัวโหลดล่วงหน้า

หลังจากแนะนำสั้นๆ แล้ว กลับมาที่ "แกะผู้" ของเรากันต่อ มาติดตั้งและกำหนดค่าปลั๊กอินกัน

ปลั๊กอินตัวโหลดล่วงหน้าที่เพียงพอและฟรีที่สุดที่ฉันพบคือปลั๊กอินที่มีชื่อเฉพาะ - ตัวโหลดล่วงหน้า แค่นั้นแหละ ไม่มีเรื่องเซอร์ไพรส์ ความจริงก็คือเมื่อคุณค้นหาปลั๊กอินในไลบรารี wordpress.org คุณจะไม่พบมัน คุณต้องเขียนตัวโหลดล่วงหน้าลงในแถบค้นหา คุณสามารถดูวิธีติดตั้งปลั๊กอินได้ ดูเหมือนว่านี้:

หลังการติดตั้ง ให้ไปที่แท็บ Plugins/Preloader จากนั้นการตั้งค่าจะเริ่มต้นขึ้นจากเมนูเล็กๆ นี้

ดังนั้นการตั้งค่าทั้งหมดจึงอยู่ในรายการสั้นๆ:

• บรรทัดแรกของการปรับคือสี พื้นหลังตัวโหลดล่วงหน้า โดยค่าเริ่มต้นจะเป็นสีขาว (#FFFFFF) คุณสามารถตั้งค่าพารามิเตอร์ที่คุณสนใจได้
• ประการที่สองนี่คือตำแหน่งของภาพเคลื่อนไหว GIF ซึ่งสามารถเปลี่ยนเป็นรูปแบบใดก็ได้คุณเพียงแค่ต้องคำนึงถึงขนาด 128x128 พิกเซล คุณสามารถใช้ลิงก์ที่ให้ไว้ในการตั้งค่าเพื่อดาวน์โหลดภาพเคลื่อนไหวที่คุณสนใจได้
• ขั้นตอนต่อไปคือการเลือกไดเร็กทอรีที่จะโหลดตัวโหลดล่วงหน้า คุณสามารถติดตั้งตัวดาวน์โหลดตามหมวดหมู่ ทั่วทั้งไซต์ แยกในหน้าแท็ก หรือเฉพาะในหน้าหลักก็ได้ ขึ้นอยู่กับคุณ
• สิ่งสุดท้ายที่คุณต้องทำคือเปิดไฟล์ header.php ในโฟลเดอร์ธีมที่ใช้งานอยู่ของคุณ และเพิ่ม div() ที่แนะนำไว้หลังแท็กเปิด
• หากปลั๊กอินทำงานอยู่ คุณสามารถตรวจสอบได้ว่าปลั๊กอินทำงานอยู่หรือไม่

นอกจากนี้ยังเป็นที่น่าสังเกตว่าเมื่อเปลี่ยน GIF ชื่อของไฟล์ควรเป็นพรีโหลดเดอร์และควรมีภาพเคลื่อนไหวดังกล่าวเพียงรายการเดียวในโฟลเดอร์ปลั๊กอินรูปภาพ

นี่เป็นคำแนะนำที่เรียบง่ายของเราเกี่ยวกับการใช้ปลั๊กอิน Preloader สำหรับไซต์ WordPress หากคุณมีคำถามหรือปัญหาใด ๆ โปรดเขียนในความคิดเห็น

ขอให้เป็นวันที่ดี สมาชิกที่รัก ผู้อ่านและผู้เยี่ยมชมเว็บไซต์ของเรา! ฉันกำลังเริ่มต้นเนื้อหานี้จากการอ้างอิงระดับใหม่สำหรับตัวฉันเอง หรือจากบทเรียน 101 บท ซึ่งฉันหวังว่าคุณจะพบว่ามีประโยชน์และเพลิดเพลิน โดยทั่วไปแล้ว การใช้ตัวโหลดล่วงหน้าสำหรับเว็บไซต์จะแพร่หลาย หัวข้อที่มีชื่อเสียงท่ามกลางแอนิเมชั่นและเอฟเฟกต์ต่างๆ แต่ฉันสังเกตเห็นว่าหลายอันมีโค้ดที่ยุ่งยากและไม่สะดวกดังนั้นฉันจึงตัดสินใจเขียนสิ่งที่ง่ายกว่าและใช้งาน jQuery.

เมื่อพิจารณาถึงเนื้อหานี้ ฉันอยากจะทราบว่าการเรียกใช้โค้ดนี้ใช้งานได้ทุกครั้งที่รีเฟรชเพจ และหากคุณจำเป็นต้องทำเช่นนี้เมื่อคลิกหรือโหลดเพจ คุณสามารถเขียนความคิดเห็นบนเว็บไซต์ จากนั้นเราจะทำได้ วิเคราะห์เนื้อหานี้โดยละเอียด

ดังนั้น ก่อนที่จะเริ่มศึกษาโค้ด ฉันได้เตรียมเนื้อหาวิดีโอไว้สำหรับคุณโดยเฉพาะ โดยมีการแนะนำบทเรียนนี้โดยละเอียด ซึ่งคุณสามารถดูได้หากคุณไม่ต้องการอ่านข้อความหรือมีคำถามใดๆ ขึ้นมาทันที

ขั้นตอนแรก.

HTML. ประการแรก ฉันตัดสินใจสร้างภาพที่มีความละเอียดกิฟ ซึ่งช่วยให้เราใช้ตัวโหลดล่วงหน้าสำหรับเว็บไซต์ได้อย่างมีประสิทธิภาพมากขึ้น ฉันอัปโหลดภาพนี้ไปยังโฟลเดอร์รูปภาพ ซึ่งจะมีรูปภาพปกติอยู่ด้วย PNG

ซึ่งจะใช้หลังจากโหลดเพจแล้ว ตอนนี้เราจำเป็นต้องเชื่อมต่อสไตล์และสคริปต์ที่จำเป็นเพื่อให้โค้ดนี้ทำงานได้สำเร็จ การเชื่อมต่อห้องสมุด jquery.min.js รวมถึงตัวสคริปต์เองด้วยโหลด.js ซึ่งจะทำหน้าที่เป็นตัวโหลดล่วงหน้า อย่าลืมเกี่ยวกับสไตล์ที่เรามีในไฟล์ด้วย.

สาธิต.css ต่อไปเราจะสร้างกอง บล็อกด้วยตัวระบุโหลด

ซึ่งจะโต้ตอบกับสคริปต์และแสดงเอฟเฟกต์นี้ หลังจากนั้น เราสร้างคอนเทนเนอร์บล็อก วางรูปภาพในนั้น แอนิเมชัน GIF ของเรา และแสดงข้อความที่กำหนดเองด้านล่าง มาจบกัน HTML ซึ่งจะมีรูปภาพปกติอยู่ด้วย.

รหัสที่มีเอาต์พุตรูปภาพอย่างง่าย

ขั้นตอนที่สอง บล็อกด้วยตัวระบุ jQuery. สคริปต์นั้นเรียบง่ายมาก ฉันไม่รู้ว่าจำเป็นต้องมีความคิดเห็นหรือไม่ แต่ฉันคิดว่าฉันจะเขียนมันต่อไปเพื่อให้มีคำถามน้อยลง ก่อนอื่น สคริปต์จะทำงานในหน้าต่างที่ตรงตามข้อกำหนด ID- ประการที่สอง ตัวระบุนี้ได้รับการกำหนดความล่าช้าโดยใช้ฟังก์ชัน ล่าช้าวี 2500 มิลลิวินาทีเพื่อให้มองเห็นเอฟเฟกต์นี้ได้ ฟังก์ชันก็มาถึง จางหายไปด้วยความหมาย ช้า

ซึ่งช่วยให้เราสามารถแสดงไซต์เองได้หลังจากเกิดความล่าช้า

ทุกอย่างค่อนข้างพื้นฐานและเรียบง่ายอย่างที่คุณเห็น

$(window).on("load", function () ( $("#load").delay(2500).fadeOut("slow"); )); ขั้นตอนที่สาม, ซีเอสเอสมาดูขั้นตอนสุดท้ายกันดีกว่า ซึ่งเราจะเขียนสไตล์ที่จำเป็นทั้งหมดเพื่อให้สคริปต์ทำงานได้อย่างถูกต้อง ฉันต้องการทราบทันทีว่าคุณสมบัติและคุณค่าทั้งหมด (ยกเว้นบางที บล็อกด้วยตัวระบุพื้นหลัง จัดข้อความ) ตัวระบุ

จากนั้น หลังจากคิดสักนิด ฉันก็ตัดสินใจว่าฉันต้องการบางสิ่งที่จะซ่อนการโหลดของไซต์ และแสดงบางอย่างเป็นการตอบแทน และเมื่อหน้าเว็บโหลดเสร็จสมบูรณ์ ผู้เยี่ยมชมก็จะแสดงให้ผู้เยี่ยมชมเห็นแบบเต็ม หลังจากค้นหาสิ่งที่ฉันต้องการเพียงเล็กน้อย ฉันก็ข้ามสคริปต์หลายตัวและเพิ่มสไตล์ของตัวเองเข้าไปเล็กน้อย ฉันได้ผลลัพธ์ที่ต้องการ ตอนนี้ผู้มาเยือน หน้า Landing Pageดูหน้าจอเริ่มต้นขนาดเล็กก่อนที่จะเห็นเนื้อหาที่โหลดเต็ม สคริปต์ทำงานในลักษณะที่จะโหลดก่อนและแสดงสิ่งที่เราตั้งค่าไว้ในการตั้งค่า หลังจากโหลดหน้าเว็บ เบราว์เซอร์จะเรียกเหตุการณ์ window.onload และสคริปต์ของเราจะแสดงหน้าที่โหลด

มีลักษณะดังนี้ ยิ่งใช้เวลาโหลดนานเท่าไร หน้าจอเริ่มต้นก็จะยิ่งแสดงนานขึ้นเท่านั้น:

การเชื่อมต่อตัวโหลดล่วงหน้ากับเว็บไซต์หรือเพจของคุณไม่ใช่เรื่องยาก สิ่งแรกที่คุณต้องทำเพื่อนำแนวคิดของคุณไปใช้คือการแทรก มาร์กอัป HTML- ซึ่งสามารถทำได้ เช่น ในส่วนหัวของไซต์ วางไว้ที่ใดก็ได้ โดยควรอยู่หลังแท็กเปิดเนื้อหา นี่คือบล็อกหลักที่มี ID p_prldr ซึ่งจะเต็มทั้งหน้าจอและด้านในซึ่งคุณสามารถวางทุกสิ่งที่ผู้เยี่ยมชมจะเห็นก่อนที่เพจจะโหลดเสร็จสมบูรณ์ ภายในบล็อกนี้ เราจะวางภาพเคลื่อนไหวและข้อความขณะโหลด

#p_prldr( ตำแหน่ง: แก้ไขแล้ว; ซ้าย: 0; บน: 0; ขวา:0; ล่าง:0; พื้นหลัง: #9A12B3; z-index: 30;).contpre ขนาดเล็ก (ขนาดตัวอักษร:25px;) .contpre( width : 250px; ตำแหน่ง: ซ้ายแน่นอน: 50%; ขอบซ้าย:-125px; สี:#fff; ระยะห่างระหว่างตัวอักษร: -2px; ความกว้าง: 41px; ความสูง: 41px; พื้นหลัง: url (images/oval.svg) ไม่ซ้ำตรงกลาง พื้นหลัง - ขนาด: 41px 0 -16px;)

บล็อกที่มีคลาส svg_anm คือแอนิเมชันของเรา ในพรีโหลดเดอร์ของฉัน ฉันใช้กราฟิก SVG สำหรับแอนิเมชัน สามารถปรับขนาดได้ตามขนาดที่ฉันต้องการ และดูสมจริงและเท่ หากต้องการคุณสามารถใช้บางส่วนได้ ภาพเคลื่อนไหว GIFหรือภาพนิ่งก็ล้วนขึ้นอยู่กับจินตนาการของคุณ ฉันมีไฟล์นี้ oval.svg ฉันตั้งค่าขนาดด้วยพารามิเตอร์ background-size:41px; คุณต้องระบุความกว้างและความสูงของบล็อกให้เท่ากับขนาดของภาพเคลื่อนไหวด้วย ความกว้าง: 41px; ส่วนสูง: 41px;

หากคุณชอบแอนิเมชั่นประเภทนี้ คุณสามารถเลือกจากแอนิเมชั่นด้านล่างนี้ได้ คลิกขวา Misha คลิกที่สิ่งที่คุณต้องการและบันทึกลงในโฟลเดอร์ที่ต้องการ

อนิเมชั่นเอง

พื้นหลังของแอนิเมชั่นถูกตั้งค่าด้วยตนเองและคุณจะมีมันเหมือนกับในบล็อกหลักของพรีโหลดเดอร์ แอนิเมชั่นนั้นจะเป็นสีขาว ดังนั้นหากคุณเปิดมันหลังจากดาวน์โหลด คุณจะไม่เห็นอะไรเลย :) เพื่อที่ภายหลังพวกเขาจะไม่' อย่าเขียนว่ามันใช้งานไม่ได้

เพื่อให้ทุกอย่างทำงานได้ คุณต้องเพิ่มสคริปต์ตัวโหลดล่วงหน้า แต่ก่อนอื่นคุณต้องตรวจสอบให้แน่ใจว่าคุณได้เชื่อมต่อไลบรารี jQuery แล้ว หากยังไม่เสร็จสิ้น ให้เพิ่มบรรทัดต่อไปนี้ในส่วนหัวก่อนส่วนหัวปิดหรือส่วนท้ายก่อนเนื้อหาการปิด:

หลังจากนั้นเราก็ใส่สคริปต์ลงไป

$(window).on("load", function () ( var $preloader = $("#p_prldr"), $svg_anm = $preloader.find(".svg_anm"); $svg_anm.fadeOut(); $preloader .delay(500).fadeOut("ช้า" ));

หากคุณไม่ได้เปลี่ยน ID ของบล็อกหลักและคลาสของบล็อกแอนิเมชัน คุณไม่จำเป็นต้องเปลี่ยนแปลงอะไรในสคริปต์ คุณสามารถกำหนดค่าได้เพียงสิ่งเดียวเท่านั้น ได้แก่ ความล่าช้าก่อนที่จะแสดงเพจ เมื่อโหลดหน้า บล็อกภาพเคลื่อนไหวจะหายไปและเนื้อหาของหน้าจะปรากฏอย่างราบรื่น แต่คุณสามารถตั้งค่าการหน่วงเวลาอื่นได้ ในสคริปต์นี้มีค่าเท่ากับ 500 มิลลิวินาที นั่นคือครึ่งวินาที คุณสามารถลดหรือเพิ่มได้หากต้องการ

ทุกอย่างทำอย่างถูกต้องและผลลัพธ์จะทำให้คุณพอใจ สิ่งสำคัญคือไม่ต้องรีบเร่งและปฏิบัติตามคำแนะนำอย่างระมัดระวัง

เพียงเท่านี้ ขอบคุณสำหรับความสนใจของคุณ

ในบทนี้ เราจะดูวิธีสร้างเปอร์เซ็นต์ของการโหลดตัวโหลดล่วงหน้าด้วยองค์ประกอบต่างๆ บนหน้าเว็บ ที่นี่เราจะทำงานกับ jQuery ทำความคุ้นเคยกับวิธีการของมัน เรียนรู้วิธีการทำงานของวงจร และสร้างฟังก์ชันของเราเองที่จะดำเนินการบางอย่าง

เรามาเอาจำนวนรูปภาพทั้งหมดบนหน้ากัน หาเปอร์เซ็นต์ แต่ละภาพจัดสรรให้เท่าไหร่ เติมแถบความคืบหน้าวนซ้ำจนรูปภาพทั้งหมดปรากฏบนหน้า และสุดท้ายเมื่อโหลดครบ 100% ก็แสดงทั้งหมด หน้าและซ่อนตัวโหลดล่วงหน้า

นี่จะเป็นแนวคิดทั่วไปของสคริปต์นี้

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

เมื่อปิดแคช เราได้รับรูปภาพ แต่แถบความคืบหน้ายังคงทำงานอยู่ หากเราควบคุมปริมาณบน 3G ทุกอย่างจะเปลี่ยนไปที่นี่รูปภาพยังโหลดไม่ทั้งหมด แต่แถบความคืบหน้าเต็ม 100% และรอให้โหลดหน้าจนจบ

เหตุผลก็คือเวลาในการโหลดตัวโหลดล่วงหน้าและเปอร์เซ็นต์ที่เราตั้งไว้ โหมดแมนนวลเราต้องทำงานกับพารามิเตอร์เหล่านี้

เนื่องจากเราจะเปลี่ยนตรรกะของสคริปต์ เราจึงไม่จำเป็นต้องเรียกมันที่ด้านล่าง เนื่องจากควรโหลดแถบความคืบหน้าก่อน เราจึงย้ายการเชื่อมต่อของไฟล์ทั้งหมดไปที่ส่วนหัว

เรากลับไปที่สคริปต์และเริ่มต้นตัวแปรหลายตัวที่ด้านบน

เราย้ายตัวแปร preloader = $("#preloader") ไปที่ด้านบนสุดด้วยความช่วยเหลือในการซ่อนตัวระบุนี้ เราจะใช้มันในภายหลังเล็กน้อย

ตัวโหลดล่วงหน้า = $("#preloader"), // ตัวเลือกตัวโหลดล่วงหน้า

โค้ดที่เหลือสามารถใส่ความคิดเห็นหรือลบออกได้ เราจะไม่ต้องการมันอีกต่อไป

// $(window).on("load", function () ( // $preloader.delay(1800).fadeOut("slow"); // ));

เราใช้ไลบรารี jQuery เพื่อเข้าถึงวัตถุรูปภาพ ลองใช้ฟังก์ชัน length เพื่อหาจำนวนรูปภาพบนเพจ และวางผลลัพธ์ที่ได้ลงในตัวแปร imageCount

ImagesCount = $("img").length, // จำนวนภาพ

ด้านล่างนี้เราจะตรวจสอบและแสดงผลลัพธ์นี้ในคอนโซล

Console.log(imagesCount);

ตอนนี้เรารู้แล้วว่ามีอยู่กี่คน ภาพกราฟิกบนหน้า จากนั้น คุณสามารถคำนวณจำนวนเปอร์เซ็นต์ที่จัดสรรให้กับรูปภาพหนึ่งรูปได้

เราหาร 100 ด้วยจำนวนรูปภาพและนำผลลัพธ์ที่ได้มาเป็นตัวแปร หากต้องการตรวจสอบเราจะแสดงในคอนโซลทันที

เปอร์เซ็นต์ = 100 / จำนวนรูปภาพ; //จำนวน % ต่อภาพ console.log(เปอร์เซ็นต์);

ตอนนี้เรารู้พารามิเตอร์เปอร์เซ็นต์การโหลดแล้ว ความคืบหน้าที่เราต้องเติมเมื่อเรียกใช้สคริปต์ และเปอร์เซ็นต์ที่จัดสรรให้กับแต่ละภาพ

เมื่อเรียกใช้ฟังก์ชันในพารามิเตอร์ วาง 100 เราจะลงทะเบียนตัวแปรด้วยจำนวนเปอร์เซ็นต์ต่อภาพ และเปลี่ยนความเร็วในการโหลดเป็น 1,000 เพื่อให้แถบความคืบหน้าโหลดเปอร์เซ็นต์เริ่มต้นเร็วขึ้น

)).circularProgress("เคลื่อนไหว", เปอร์เซ็นต์, 1,000);

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

ในการทำเช่นนี้ เราสร้างลูป โดยที่ I เป็นตัวแปรตัวนับ จากนั้นเราเขียนเงื่อนไข ในขณะที่ I น้อยกว่าจำนวนรูปภาพ เราจะเพิ่มตัวนับหนึ่ง var i = 0; ฉัน< imagesCount; i++ , и в скобках выполнять следующие действия.

เราสร้างตัวแปรที่เราวางอินสแตนซ์ของวัตถุ Image (นั่นคือ รูปภาพ) จากนั้นเราสร้างสำเนาของ src

เบราว์เซอร์ช่วยให้คุณติดตามการโหลดทรัพยากรภายนอก - สคริปต์ รูปภาพที่ใช้เหตุการณ์ - หากเกิดข้อผิดพลาดระหว่างการโหลด

บรรทัดถัดไปเรียกใช้ฟังก์ชันโดยใช้เหตุการณ์ onload ซึ่งจะเปิดแถบความคืบหน้า เราจะอธิบายในภายหลังเล็กน้อย

และในบรรทัดที่สองเราเรียกว่าเหตุการณ์ onerror หากเกิดข้อผิดพลาดกะทันหัน: รูปภาพไม่โหลด

สำหรับ (var i = 0; i< imagesCount; i++){ // создаем клон изображений var img_copy = new Image(); img_copy.src = document.images[i].src; img_copy.onload = img_load; img_copy.onerror = img_load; }

ด้านล่างนี้เราจะอธิบายฟังก์ชันที่เรียกใช้ตัวโหลดล่วงหน้าและเพิ่มเปอร์เซ็นต์ เขียนฟังก์ชัน img_load() ไว้ข้างในเพื่อเพิ่มเปอร์เซ็นต์ที่เราทราบในความคืบหน้าในการโหลด เมื่อต้องการทำเช่นนี้ ให้สร้างตัวแปรอื่นที่มีค่าเป็นศูนย์ เรียกว่าความคืบหน้า

ความคืบหน้า = 0; //จุดเริ่มต้น

จากนั้นเราสร้างตัวแปรอื่นขึ้นมา เรียกมันว่า LoadImg ด้วยค่าศูนย์ มันจะเป็นตัวนับที่เราเปรียบเทียบกับจำนวนภาพที่ลอกแบบมา

LoadedImg = 0, // ตัวนับการโหลดรูปภาพ

เรากลับไปที่ฟังก์ชัน เพิ่มความคืบหน้า += เปอร์เซ็นต์ในนูเตรีย และบันทึกผลลัพธ์ที่กำลังดำเนินการ ในบรรทัดที่สอง เราเพิ่มตัวนับ LoadImg++ ทีละตัว

ต่อไป เราจะเขียนเงื่อนไข หากความคืบหน้ามากกว่าหรือเท่ากับ 100 (โดยที่ 100 คือจำนวนเปอร์เซ็นต์ทั้งหมด) หรือตัวนับ LoadImg เท่ากับจำนวนรูปภาพที่โหลด imageCount คุณสามารถลบแถบความคืบหน้า preloader.delay ได้ (400).fadeOut("ช้า"); ไม่เช่นนั้นเราจะเรียกแถบความคืบหน้าขึ้นมา ซึ่งเราจะเพิ่มความคืบหน้า และลดความเร็วในการโหลดลงเหลือ 500

ฟังก์ชัน img_load() (ความคืบหน้า += เปอร์เซ็นต์; โหลดImg++; if (ความคืบหน้า >= 100 || LoadImg == imagesCount)( preloader.delay(400).fadeOut("slow"); qBody.css("overflow", "" ) $(".dws-progress-bar").circularProgress("เคลื่อนไหว", ความคืบหน้า, 500 )

ใช้คอนโซล มาตรวจสอบว่าออบเจ็กต์รูปภาพใหม่ถูกสร้างขึ้นอย่างไร

Console.log(img_copy); console.log(img_copy.src);

เราเห็นว่ามีการสร้างโคลนรูปภาพห้าแบบสำเร็จ แต่ละแบบมีลิงก์ ไม่มีข้อผิดพลาด ฟังก์ชันได้รับการประมวลผลสำเร็จ

ตอนนี้เรามาลบการเลื่อนด้านขวาไปที่ด้านล่าง เพื่อที่ว่าเมื่อโหลดตัวโหลดล่วงหน้า เราจะไม่สามารถเลื่อนหน้าได้เหมือนที่เราทำอยู่ตอนนี้

ในการทำเช่นนี้ เราจะรวมทุกอย่างไว้ในเงื่อนไข: หากจำนวนรูปภาพมากกว่าศูนย์ imageCount > 0 เราจะดำเนินการ สคริปต์นี้ไม่เช่นนั้นเราจะลบตัวโหลดล่วงหน้า preloader.remove(); - หากผ่านเงื่อนไข ให้เพิ่มพื้นหลังสีดำให้กับตัวโหลดล่วงหน้า preloader.css("พื้นหลัง", "#000"); และใน css สไตล์นี้ลบ.

ถ้า (imagesCount >= imgSum && imageCount > 0) ( preloader.css("พื้นหลัง", "#000"); ) else ( preloader.remove(); )

เราเริ่มต้นตัวแปรอื่นโดยที่เราวางตัวเลือก qBody = $("body") และในเงื่อนไขเราระบุการล็อคการเลื่อนสำหรับตัวเลือกเนื้อหา qBody.css("overflow", "hidden"); -

QBody.css("ล้น", "ซ่อน");

ตอนนี้เราจำเป็นต้องยกเลิกการบล็อกการเลื่อน ด้วยเหตุนี้ เมื่อเราลบตัวโหลดล่วงหน้า จากนั้นสำหรับเนื้อหา เราจะล้างการบล็อก qBody.css("overflow", ""); -

QBody.css("ล้น", "");

เราลบเอาต์พุตข้อมูลบริการในคอนโซลและบันทึก

โดยหลักการแล้ว ตัวโหลดล่วงหน้าพร้อมแล้ว แต่จะไม่น่าสนใจเสมอไปสำหรับเราที่จะเปิดตัวด้วยรูปภาพหนึ่งหรือสองรูปบนหน้าเว็บ เพื่อไม่ให้เรียกมันอีก ให้เพิ่มตัวแปร เรียกมันว่า imgSum แล้วใส่ค่า imgSum = 3 ลงไป -

เรามาเพิ่มเงื่อนไขที่ว่าหากจำนวนรูปภาพมากกว่าหรือเท่ากับตัวแปรของเรา (imagesCount >= imgSum && imageCount > 0) เราจะปฏิบัติตามเงื่อนไข ไม่เช่นนั้นเราจะลบตัวโหลดล่วงหน้า ดังนั้น เมื่อใช้ตัวแปร imgSum นี้ เราสามารถตั้งค่าการโหลดตัวโหลดล่วงหน้าสำหรับรูปภาพจำนวนหนึ่งได้

เมื่อแถบความคืบหน้าทำงานอย่างรวดเร็ว เปอร์เซ็นต์ของเราพุ่งเกิน 100 มาแก้ไขกันทันที เปิดไฟล์ Plugin.js ค้นหาว่ามีการสร้างเปอร์เซ็นต์ในนั้นและเพิ่มเงื่อนไขต่อไปนี้ก่อนตรวจสอบค่าเปอร์เซ็นต์หากมากกว่า 100 จากนั้นส่งคืน 100 มิฉะนั้นปล่อยไว้ไม่เปลี่ยนแปลง

global_settings.percent = (global_settings.percent > 100) ? 100: global_settings.percent;

มาเพิ่มรูปภาพกันดูว่าตัวโหลดล่วงหน้าจะทำงานอย่างไรกับรูปภาพจำนวนมาก และในขณะเดียวกันก็ตรวจสอบการตั้งค่าเพิ่มเติม

ในบันทึกนี้ ฉันจะสรุปบทเรียนนี้ หากคุณสนใจ อย่าลืมแบ่งปันกับเพื่อน ๆ ของคุณ

บทเรียนนี้จัดทำโดย Denis Gorelov