การโหลดภาพล่วงหน้าเป็นวิธีที่ดีในการปรับปรุงประสบการณ์การใช้งานของคุณ รูปภาพจะถูกโหลดลงในเบราว์เซอร์ล่วงหน้าและผู้เข้าชมสามารถท่องบนเว็บไซต์ของคุณได้อย่างราบรื่นและเพลิดเพลินกับความเร็วในการโหลดที่รวดเร็วมาก นี่เป็นประโยชน์อย่างมากสำหรับแกลเลอรี่รูปภาพและเว็บไซต์ที่รูปภาพมีสัดส่วนเป็นจำนวนมาก ช่วยให้มั่นใจได้ว่ารูปภาพได้รับการเผยแพร่อย่างรวดเร็วและราบรื่นและยังสามารถช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีขึ้นเมื่อเรียกดูเนื้อหาเว็บไซต์ของคุณ บทความนี้จะแบ่งปันเทคโนโลยีการโหลดล่วงหน้าที่แตกต่างกันสามรายการเพื่อเพิ่มประสิทธิภาพและการใช้งานของเว็บไซต์
วิธีที่ 1: ใช้ CSS และ JavaScript เพื่อใช้งานการโหลดล่วงหน้า
มีหลายวิธีในการใช้ภาพล่วงหน้ารวมถึงการใช้ CSS, JavaScript และชุดค่าผสมต่าง ๆ ของทั้งสอง เทคโนโลยีเหล่านี้สามารถออกแบบโซลูชันที่สอดคล้องกันตามสถานการณ์การออกแบบที่แตกต่างกันซึ่งมีประสิทธิภาพมาก
การใช้ CSS เพียงอย่างเดียวสามารถโหลดภาพไว้ล่วงหน้าได้อย่างง่ายดายและมีประสิทธิภาพและรหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
#preload-01 {พื้นหลัง: url (http: //domain.tld/image-01.png) No-Repeat -9999px -99999px; -
#preload-02 {พื้นหลัง: url (http: //domain.tld/image-02.png) No-Repeat -9999px -99999px; -
#preload-03 {พื้นหลัง: url (http: //domain.tld/image-03.png) No-Repeat -9999px -99999px; -
ด้วยการใช้ตัวเลือก ID ทั้งสามนี้กับองค์ประกอบ (x) HTML เราสามารถโหลดภาพไว้บนพื้นหลังหน้าจอผ่านคุณสมบัติพื้นหลังของ CSS ได้ ตราบใดที่เส้นทางของภาพเหล่านี้ยังคงเหมือนเดิมเบราว์เซอร์จะใช้รูปภาพที่โหลดไว้ล่วงหน้า (แคช) ระหว่างการเรนเดอร์เมื่อพวกเขาถูกเรียกว่าที่อื่นบนหน้าเว็บ ง่ายมีประสิทธิภาพและไม่ต้องการจาวาสคริปต์ใด ๆ
แม้ว่าวิธีนี้จะมีประสิทธิภาพ แต่ก็มีที่ว่างสำหรับการปรับปรุง รูปภาพที่โหลดโดยใช้วิธีนี้จะถูกโหลดพร้อมกับเนื้อหาอื่น ๆ ของหน้าเพิ่มเวลาโหลดโดยรวมของหน้า ในการแก้ปัญหานี้เราได้เพิ่มรหัส JavaScript เพื่อชะลอเวลาโหลดล่วงหน้าจนกว่าจะโหลดหน้าเว็บ รหัสมีดังนี้:
การคัดลอกรหัสมีดังนี้:
// Better Image Preloading @ <a href = "http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/"> http://perishablepress.com/press/2009/12/28/3-ways-ways-pr preloader () {
if (document.getElementById) {
document.getElementById ("preload-01"). style.background = "url (http: //domain.tld/Image-01.png) ไม่มีการทำซ้ำ -9999px -9999px";
document.getElementById ("preload-02"). style.background = "url (http: //domain.tld/image-02.png) ไม่มีการทำซ้ำ -9999px -9999px";
document.getElementById ("preload-03"). style.background = "url (http: //domain.tld/image-03.png) ไม่ต้องทำซ้ำ -9999px -99999px";
-
-
ฟังก์ชั่น addloadEvent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} อื่น {
window.onload = function () {
ถ้า (oldonload) {
Oldonload ();
-
func ();
-
-
-
addloadEvent (preloader);
ในส่วนแรกของสคริปต์เราใช้องค์ประกอบโดยใช้ตัวเลือกคลาสและตั้งค่าคุณสมบัติพื้นหลังสำหรับมันเพื่อโหลดภาพที่แตกต่างกันล่วงหน้า
ในส่วนที่สองของสคริปต์นี้เราใช้ฟังก์ชัน AddLoadEvent () เพื่อชะลอเวลาในการโหลดของฟังก์ชัน preloader () จนกว่าหน้าจะโหลด
จะเกิดอะไรขึ้นถ้า JavaScript ทำงานไม่ถูกต้องในเบราว์เซอร์ของผู้ใช้? มันง่ายมาก ภาพจะไม่โหลดไว้ล่วงหน้า เมื่อหน้าเรียกภาพมันจะปรากฏขึ้นตามปกติ
วิธีที่ 2: ใช้ JavaScript เท่านั้นเพื่อใช้งานการโหลดล่วงหน้า
วิธีการข้างต้นบางครั้งมีประสิทธิภาพมาก แต่เราค่อยๆพบว่าต้องใช้เวลามากเกินไปในการใช้งานจริง แต่ฉันชอบใช้ JavaScript บริสุทธิ์เพื่อโหลดรูปภาพล่วงหน้า สองวิธีการโหลดล่วงหน้าดังกล่าวมีให้ด้านล่างซึ่งสามารถทำงานได้อย่างสวยงามบนเบราว์เซอร์ที่ทันสมัยทั้งหมด
ส่วนรหัส JavaScript 1
เป็นเรื่องง่ายที่จะนำไปใช้โดยเพียงแค่แก้ไขและโหลดเส้นทางและชื่อของภาพที่ต้องการ:
การคัดลอกรหัสมีดังนี้:
<div>
<script type = "text/javascript">
<!-//-> <! [cdata [//> <!-images var = array ใหม่ ()
ฟังก์ชั่น preload () {
สำหรับ (i = 0; i <preload.arguments.length; i ++) {
รูปภาพ [i] = ภาพใหม่ ()
รูปภาพ [i] .src = preload.arguments [i]
-
-
โหลดล่วงหน้า (
"http: //domain.tld/gallery/image-001.jpg"
"http: //domain.tld/gallery/image-002.jpg"
"http: //domain.tld/gallery/image-003.jpg"
-
//-> <!]]> </script>
</div>
วิธีนี้เหมาะอย่างยิ่งสำหรับการโหลดภาพจำนวนมาก เว็บไซต์แกลเลอรี่ของฉันใช้เทคโนโลยีนี้และมีภาพที่โหลดไว้มากกว่า 50 ภาพ ใช้สคริปต์กับหน้าเข้าสู่ระบบและตราบใดที่ผู้ใช้เข้าสู่บัญชีเข้าสู่ระบบรูปภาพแกลเลอรี่ส่วนใหญ่จะถูกโหลดไว้ล่วงหน้า
JavaScript ตัวอย่าง 2
วิธีนี้คล้ายกับวิธีการข้างต้นและยังสามารถโหลดรูปภาพจำนวนใดก็ได้ เพิ่มสคริปต์ต่อไปนี้ในหน้าเว็บใด ๆ และแก้ไขตามคำแนะนำของโปรแกรม
การคัดลอกรหัสมีดังนี้:
<div>
<script type = "text/javascript">
<!-//-> <! [cdata [////> <!-ถ้า (document.images) {
img1 = ภาพใหม่ ();
img2 = ภาพใหม่ ();
img3 = ภาพใหม่ ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
-
//-> <!]]> </script>
</div>
ดังที่เห็นได้การโหลดภาพแต่ละภาพจำเป็นต้องสร้างตัวแปรเช่น "IMG1 = ภาพใหม่ ();" และการประกาศที่อยู่แหล่งที่มาของภาพเช่น "IMG3.SRC =
"../path/to/image-003.gif"; "อ้างอิงถึงโหมดนี้คุณสามารถโหลดรูปภาพได้มากเท่าที่คุณต้องการ
เราได้ปรับปรุงวิธีนี้อีกครั้ง ห่อหุ้มสคริปต์ลงในฟังก์ชั่นและใช้ addloadEvent () เพื่อชะลอเวลาโหลดล่วงหน้าจนกว่าหน้าจะโหลดหน้า
การคัดลอกรหัสมีดังนี้:
ฟังก์ชัน preloader () {
if (document.images) {
var img1 = ภาพใหม่ ();
var img2 = ภาพใหม่ ();
var img3 = ภาพใหม่ ();
img1.src = "http: //domain.tld/path/to/image-001.gif";
img2.src = "http: //domain.tld/path/to/image-002.gif";
img3.src = "http: //domain.tld/path/to/image-003.gif";
-
-
ฟังก์ชั่น addloadEvent (func) {
var oldonload = window.onload;
if (typeof window.onload! = 'function') {
window.onload = func;
} อื่น {
window.onload = function () {
ถ้า (oldonload) {
Oldonload ();
-
func ();
-
-
-
addloadEvent (preloader);
วิธีที่ 3: ใช้ AJAX เพื่อใช้งานล่วงหน้า
วิธีการที่ได้รับข้างต้นดูเหมือนจะไม่เจ๋งพอตอนนี้มาดูวิธีที่ใช้ AJAX เพื่อใช้การโหลดล่วงหน้า วิธีนี้ใช้ DOM ไม่เพียง แต่โหลดรูปภาพไว้ล่วงหน้า แต่ยังรวมถึง CSS, JavaScript และสิ่งอื่น ๆ ที่เกี่ยวข้อง การใช้ AJAX นั้นดีกว่าการใช้ JavaScript โดยตรงข้อได้เปรียบคือการโหลด JavaScript และ CSS จะไม่ส่งผลกระทบต่อหน้าปัจจุบัน วิธีนี้ง่ายและมีประสิทธิภาพ
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
settimeout (function () {
// XHR เพื่อขอ JS และ CSS var XHR = ใหม่ XMLHTTPREQUEST ();
xhr.open ('get', 'http: //domain.tld/preload.js');
xhr.send ('');
xhr = ใหม่ xmlhttprequest ();
xhr.open ('get', 'http: //domain.tld/preload.css');
xhr.send ('');
// preload image image ใหม่ (). src = "http: //domain.tld/preload.png";
}, 1,000);
-
รหัสข้างต้นได้รับการโหลดล่วงหน้าด้วย "preload.js", "preload.css" และ "preload.png" การหมดเวลา 1,000 มิลลิวินาทีคือการป้องกันไม่ให้สคริปต์แขวนซึ่งทำให้เกิดปัญหาการทำงานในหน้าปกติ
ด้านล่างเรามาดูวิธีการใช้กระบวนการโหลดโดยใช้ JavaScript:
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
settimeout (function () {
// อ้างอิงถึง <head>
var head = document.getElementsByTagname ('head') [0];
// CSS ใหม่
var css = document.createElement ('link');
css.type = "ข้อความ/css";
css.rel = "stylesheet";
css.href = "http: //domain.tld/preload.css";
// JS ใหม่
var js = document.createElement ("สคริปต์");
js.type = "ข้อความ/javascript";
js.src = "http: //domain.tld/preload.js";
// preload js และ css head.appendchild (CSS);
head.appendchild (JS);
// preload image
ภาพใหม่ (). src = "http: //domain.tld/preload.png";
}, 1,000);
-
ที่นี่เราสร้างสามองค์ประกอบผ่าน DOM เพื่อใช้การโหลดล่วงหน้าสามไฟล์ ดังที่ได้กล่าวมาแล้วด้วย AJAX ไฟล์การโหลดจะไม่ถูกนำไปใช้กับหน้าโหลด จากมุมมองนี้วิธี AJAX นั้นเหนือกว่า JavaScript
โอเคบทความนี้จะแนะนำที่นี่ ทุกคนเข้าใจสามวิธีในการใช้เทคโนโลยีการโหลดภาพล่วงหน้า อันไหนมีประสิทธิภาพมากกว่า? ฉันคิดว่าเพื่อน ๆ ได้เห็นมันด้วยดังนั้นนำไปใช้กับโครงการของตัวเอง