VisSense.js - Quan sát thay đổi hiển thị của phần tử DOM

VisSense.js

Giới thiệu thư viện VisSense.js

Chắc hẳn hiện giờ những bạn nào thường xuyên dùng Facebook đều biết một chức năng hay ho của mạng xã hội này là trong khi bạn đang đọc bài trên News Feed, nếu bạn kéo thanh cuộn lướt tới một video nào đó thì video đó sẽ tự động phát (play).

Một ví dụ điển hình khác là trang giải trí nổi tiếng 9GAG, trong mục ảnh GIF. Bạn kéo thanh cuộn tới ảnh nào thì ảnh đó sẽ... động, còn bình thường thì các ảnh khác sẽ hiển thị dưới dạng ảnh tĩnh (JPG thumbnail). Đây là một cách rất hay để tiết kiệm băng thông.

Vậy làm sao để bạn có thể biết khi nào video đang hiển thị trên màn hình? Hay khi nào biết người dùng đang kéo tới ảnh nào trong trường hợp của 9GAG? Thư viện VisSense.js sẽ giúp bạn trả lời câu hỏi này!

Có rất nhiều trường hợp sử dụng khác nhau cho thư viện này. Nó được mô tả trên trang GitHub như sau:

Một thư viện tiện ích cho việc quan sát những thay đổi khả năng hiển thị của các phần tử DOM. Có thể biết tức thì khi một phần tử trở nên ẩn, có thể nhìn thấy một phần hoặc hoàn toàn có thể nhìn thấy.

VisSense.js

Điều thú vị ở đây là, thư viện này không những áp dụng vào các trường hợp như display: nonevisibility: hidden trong CSS của bạn mà còn được kích hoạt khi một phần tử cuộn qua màn hình. Điều này có thể có ích trong các trò chơi hoặc các giao diện di chuyển độc đáo.

Ví dụ sử dụng VisSense.js

Các trang demo có rất nhiều ví dụ thực sự tốt. Dưới đây là một đoạn ví dụ để bạn có thể hình dung được một ý tưởng về cách sử dụng nó:

var video = $('#video');
var visibility = VisSense(video[0], { fullyvisible: 0.75 });

var visibility_monitor = visibility.monitor({
  fullyvisible: function() {
    video.play();
  },
  hidden: function() {
    video.stop();
  }
}).start();

Trong trường hợp này, chúng ta đang nói với trình duyệt phát một đoạn video chỉ khi video hiển thị ít nhất 75% trên màn hình và dừng video nếu ngược lại (video không còn hiển thị trên màn hình).

Thư viện có một số phương pháp bao gồm hidden(), visible(), fullyVisible(), visibilitychange(), và percentagechange(). Bạn có thể xem các tài liệu hướng dẫn để biết chi tiết về chúng và cả các tính năng khác.

Theo Juno_okyo's Blog.


:point_right: Theo dõi Juno_okyo trên Kipalog · Facebook · Twitter · Google+ · Youtube

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Juno_okyo

24 bài viết.
812 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
146 15
(Ảnh) Biểu thức chính quy (hay regex) là một công cụ mạnh mẽ mà mỗi nhà phát triển nên biết. Nó có thể khớp với một chuỗi các ký tự dựa trên các t...
Juno_okyo viết hơn 2 năm trước
146 15
White
81 15
(Ảnh) Trong bài viết này tôi sẽ chia sẻ 12 thủ thuật vô cùng hữu ích cho JavaScript. Những thủ thuật này sẽ giúp bạn giảm lượng code cũng như làm ...
Juno_okyo viết hơn 1 năm trước
81 15
White
55 6
Bạn thấy chán các trang web cũ? Muốn tìm một vài góc mới của Internet để giúp bạn tìm lại sự hứng thú? Tốt thôi, bạn đã gặp may đấy. Dù bạn đang tì...
Juno_okyo viết hơn 1 năm trước
55 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
24 bài viết.
812 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!