Cách chơi GIF hoạt hình trên Click

GIF hoạt hình là một cách phổ biến để trực quan hóa một khái niệm thiết kế (đây là một ví dụ về cách chúng tôi đã làm nó cho các hiệu ứng văn bản bài viết được tạo bằng CSS) hoặc hiển thị một video clip ngắn. Nhưng nếu bạn có quá nhiều trong số chúng trong cùng một trang, nó sẽ làm lệch trọng tâm người dùng của bạn. Đối với các trang hiển thị nhiều GIF, đây là tin xấu.

Giải pháp: phục vụ người dùng bằng hình ảnh tĩnh và chỉ cho phép GIF hoạt hình chạy khi người dùng nhấp. Trong hướng dẫn ngắn này, chúng tôi sẽ chỉ cho bạn cách làm điều đó.

Xem bản demo
Tải xuống nguồn

Bắt đầu

Bắt đầu với việc chuẩn bị các thư mục và tệp dự án bao gồm: tệp HTML, jQuery và cuối cùng là tệp JavaScript nơi chúng tôi sẽ viết mã của chúng tôi. Bạn có thể liên kết jQuery với CDN hoặc lấy bản sao và liên kết nó với thư mục dự án của bạn. Tôi sẽ để các phong cách và CSS theo trí tưởng tượng của bạn. Phần quan trọng nhất là đánh dấu HTML như sau:

Thông báo bổ sung dữ liệu-alt thuộc tính trong img thành phần. Đây là nơi chúng tôi lưu trữ GIF, thay cho hình ảnh tĩnh mà chúng tôi ban đầu phục vụ. Bạn có thể thêm nhiều hình ảnh và cũng có thể thêm chú thích cho từng thông qua tượng hình thành phần.

Sau đó, chúng tôi sẽ viết JavaScript sẽ mang lại điều kỳ diệu. Ý tưởng là phục vụ hình ảnh GIF khi người dùng nhấp vào hình ảnh.

JavaScript

Đầu tiên, chúng ta tạo một hàm sẽ lấy đường dẫn hình ảnh GIF mà chúng ta đã đặt vào dữ liệu-alt thuộc tính. Chúng tôi sẽ lặp qua từng hình ảnh và sử dụng jQuery .dữ liệu() phương pháp để làm như vậy:

 var getGif = function () var gif = []; $ ('img'). mỗi (hàm () var data = $ (this) .data ('alt'); gif.push (data);); trả lại gif;  var gif = getGif ();

Chúng tôi chạy chức năng và lưu đầu ra trong một biến gif, như trên. Các gif biến bây giờ chứa đường dẫn của GIF từ các hình ảnh trong trang.

Tải trước hình ảnh

Bây giờ chúng tôi gặp sự cố tải: với GIF chưa được tải, có khả năng GIF hoạt hình sẽ không phát ngay lập tức (vì trình duyệt sẽ cần vài giây để tải GIF hoàn toàn). Độ trễ này sẽ được cảm nhận rõ rệt hơn khi kích thước hình ảnh GIF lớn.

Chúng tôi cần tải trước hoặc tải GIF đồng thời khi trang đang tải.

 // Tải trước tất cả GIF. hình ảnh var = []; $ .each (gif, function (index) image [index] = new Image (); image [index] .src = gif [index];);

Bây giờ, hãy mở DevTools, sau đó đi đến Mạng (hoặc là Tài nguyên) chuyển hướng. Bạn sẽ nhận thấy rằng GIF đã được tải ngay cả khi chúng được lưu trong dữ liệu-alt thuộc tính. Và sau đây là tất cả các mã bạn cần phải làm như vậy.

Đoạn cuối của mã là nơi chúng ta liên kết mỗi nhân vật yếu tố bao bọc hình ảnh với nhấp chuột biến cố.

Mã sẽ trao đổi nguồn hình ảnh giữa src thuộc tính nơi hình ảnh tĩnh được phục vụ và dữ liệu-alt thuộc tính ban đầu chúng tôi phục vụ hình ảnh GIF.

Mã cũng sẽ trở lại hình ảnh tĩnh khi người dùng nhấp lần thứ hai, “dừng lại” các hình ảnh động.

 $ ('hình'). on ('click', function () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'); if ($ imgExt [1] === 'gif') $ img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); khác $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt')););

Và đó là nó. Bạn có thể đánh bóng trang bằng các kiểu, ví dụ: bạn có thể thêm nút phát phủ lên hình ảnh để cho biết rằng đó là “có thể chơi được” hoặc một GIF hoạt hình.

Kiểm tra bản demo và tải về nguồn tại đây.

Xem bản demo
Tải xuống nguồn