[lập trình Front End ] – VisSense.js – Quan sát thay đổi hiển thị của phần tử DOM

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.

Đ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: none và visibility: 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.

————————
Đào tạo chuyên gia lập trình CyberSoft.edu.vn

Chuyên gia Full Stack với React JS-NodeJS/Express : Node Js – React JS 

Chuyên gia lập trình Front End chuyên nghiệp 

Tư duy – thuật toán – lập trình hướng đối tượng