วิธีเล่น GIF แบบเคลื่อนไหวบนคลิก

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

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

• ดูการสาธิต
• แหล่งดาวน์โหลด

เริ่มต้นใช้งาน

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

ขอให้สังเกตเพิ่มเติม ข้อมูล Alt คุณลักษณะใน img ธาตุ. นี่คือที่ที่เราจัดเก็บ GIF ในสถานที่ของภาพนิ่งที่เราเริ่มให้บริการ คุณสามารถเพิ่มภาพได้มากขึ้นและเพิ่มคำอธิบายภาพสำหรับแต่ละภาพผ่าน figcaption ธาตุ.

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

จาวาสคริปต์

ก่อนอื่นเราสร้างฟังก์ชั่นที่จะดึงเส้นทางของภาพ GIF ที่เราใส่เข้าไป ข้อมูล Alt คุณลักษณะ เราจะวนซ้ำแต่ละภาพและใช้ jQuery .ข้อมูล() วิธีการทำ:

 var getGif = function () var gif = []; $ ('img'). แต่ละอัน (function () var data = $ (นี่) .data ('alt'); gif.push (data);); gif คืน  var gif = getGif ();

เราเรียกใช้ฟังก์ชั่นและบันทึกผลลัพธ์ในตัวแปร GIF, ดังกล่าวข้างต้น GIF ตอนนี้ตัวแปรมีเส้นทางของ GIF จากภาพในหน้า.

โหลดภาพล่วงหน้า

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

เราจำเป็นต้องโหลดล่วงหน้าหรือโหลด GIF พร้อมกันในขณะที่หน้ากำลังโหลด.

 // โหลด GIF ทั้งหมดล่วงหน้า var image = []; $ .each (gif, ฟังก์ชั่น (ดัชนี) image [index] = new Image (); image [index] .src = gif [index];);

ตอนนี้เปิด DevTools แล้วตรงไปที่ เครือข่าย (หรือ ทรัพยากร) แท็บ คุณจะสังเกตเห็นว่า GIF ถูกโหลดไปแล้วแม้ว่าจะถูกบันทึกไว้ใน ข้อมูล Alt คุณลักษณะ และต่อไปนี้เป็นรหัสทั้งหมดที่คุณต้องทำ.

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

รหัสจะสลับแหล่งภาพระหว่าง src คุณลักษณะที่ให้บริการรูปภาพแบบคงที่และ ข้อมูล Alt แอตทริบิวต์ที่เราให้บริการภาพ GIF ในตอนแรก.

รหัสนี้จะเปลี่ยนกลับเป็นภาพนิ่งเมื่อผู้ใช้คลิกครั้งที่สอง, “การหยุด” แอนิเมชั่น.

 $ ('รูป'). เมื่อ ('คลิก', ฟังก์ชัน () var $ this = $ (นี้), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.') ถ้า ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')) attr ('data-alt', $ imgSrc); อื่น $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

และนั่นคือมัน คุณสามารถขัดหน้าด้วยสไตล์ตัวอย่างเช่นคุณอาจเพิ่มปุ่มเล่นซ้อนภาพเพื่อระบุว่าเป็น “เล่นได้” หรือภาพเคลื่อนไหว GIF.

ตรวจสอบตัวอย่างและดาวน์โหลดซอร์สได้ที่นี่.

• ดูการสาธิต
• แหล่งดาวน์โหลด