วิธีเล่น 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.
ตรวจสอบตัวอย่างและดาวน์โหลดซอร์สได้ที่นี่.
- ดูการสาธิต
- แหล่งดาวน์โหลด