Hướng dẫn intersection javascript - giao lộ javascript
Trước đây, để xác định một element có đang hiển thị trong vùng nhìn không, hay là việc xem người dùng đang đọc nội dung này trong thời gian bao lâu là một điều vô cùng khó khăn . Để phát triển trang web và lấy được dử liệu trên để sử lý một số chức năng hửu ích nhằm tăng trải nghiêm người dùng và đẩy cao tốc độ của trang web. Hôm nay chúng ta hảy cùng tiềm hiều về Intersection Observer API Show Intersection Observer API là gì?Theo MDN
Intersection Observer API cung cấp một cách để quan sát không đồng bộ các thay đổi trong giao diện với các ancestor element hay với các document’s viewport cấp cao. (viewport: là một khung hình, có thể là một khu vực hình đa giác (thường là hình chữ nhật) trên màn hình mà bạn được nhìn thấy. Trong trình duyệt web, nó đề cập đến phần document mà người dùng đang nhìn thấy, cái hiển thị trong cửa sổ ứng dụng (hoặc trên màn hình nếu hiển thị ở dạng full screen). Các phần bên ngoài viewport là những thứ bạn không nhìn thấy, cho đến khi bạn scroll tới nó)
và load hình ảnh từ src vào srx khi scroll tới phần hình ảnh
Ở đây chúng ta có thể thấy một thuộc được cung cấp :
Đây là thuôc tính có thể tạm hiểu là mở rộng hoặc thu hẹp phạm vi của phần tử mà chúng ta đang theo dỏi.Ở ví dụ trên chúng ta có thể thấy , việc load ảnh sẻ được thực thi khi chúng ta scoll cách vị trí hiện tại của ảnh 200px . Nêu chúng ta không sử dụng thuộc tính này việc load sẻ được thực thi ngay sau khi vị trí của ảnh đi vào viewport . Có thể sử dụng chúng với các giá trị tương tự như thuộc tính lề CSS, ví dụ: "10px 20px 30px 40px" (trên cùng, phải, dưới, trái). Ở đay tôi sẻ cung cấp cho các bạn một thuộc tính hử ích khác
threshold :cho biết tỷ lệ phần trăm khả năng hiển thị của thành phần sẽ được thực hiện. Nếu bạn chỉ muốn phát hiện khi khả năng hiển thị vượt qua mốc 50%, bạn có thể sử dụng giá trị 0,5. :cho biết tỷ lệ phần trăm khả năng hiển thị của thành phần sẽ được thực hiện. Nếu bạn chỉ muốn phát hiện khi khả năng hiển thị vượt qua mốc 50%, bạn có thể sử dụng giá trị 0,5. 2 . Infinite ScrollPhần HTML
Phần Js
So sánh Intersection Observer và EventListener ScrollTheo nhiều bài viết so sanh Intersection Observer cho một hiều năng tốt hơn ngoài ra sức mạnh của nó là ở tính linh hoạt và các chức năng tích hợp của nó. Các bạn củng có xem một số bài viết so sanh ở đây : https://itnext.io/1v1-scroll-listener-vs-intersection-observers-469a26ab9eb6https://medium.com/@cristinallamas/intersection-observer-vs-eventlistener-scroll-90aed9dc0e62Can I UseKết luậnIntersection Observer cung cấp những tính năng vượt trội , dúp sử lý những chức năng phức tạp một cách dể dàng hơn và cải thiện performance . Thay thế EventListener Scroll trong xử lý nhiều tác vụ, như là lazy load images, infinite scroll,... Tham khảo
|