Dùng CSS thay thế thư viện JavaScript nếu như bạn biết đến những CSS này thì không cần phải sử dụng thư viện ngoài của JavaScript. Giúp cho blogspot của bạn cải thiện đáng kể cho việc load trang.
1. Sticky
Trước kia nếu muộn cố định khi cuộn trang thì chúng ta phải sử dụng thêm thư viện JavaScript còn giờ bạn hoàn toàn có thể sử dụng CSS.
Demo: Các bạn xem Sticky thanh Sidebar phải của web mình.
.sticky {
position: -webkit-sticky;
position: sticky;
top: 0; // khoảng cách so với TOP trên khi cuộn trang
}
Với CSS bên trên nó sẽ cố định một phần tử HTML elements khi chúng ta cuộn trang.
Nhược điểm: Không hoạt động trong Internet Explorer hoặc Edge 15 và các phiên bản cũ hơn.
2. Hiệu ứng cuộn trang
Hiệu ứng khi chúng ta click rồi cuộn đến một vị trí nào đó bạn hoàn toàn có thể sử dụng CSS bên dưới mà không cần dùng đến thư viện JavaScript.
Demo: Video của Template landing page bất động sản này, Click vào thanh menu sẽ cuộn tới vị trí của nó.
html {
scroll-padding-top: 10%; // khoảng cách của phần tử so với TOP trên
scroll-behavior: smooth
}
3. Lazyload
Ngoài việc sử dụng thư viện Lazyload trì hoãn ảnh thì bạn hoàn toàn có thể sử dụng thuộc tính loading="lazy".
Demo: Các bạn thử rồi sẽ biết
<img src="template.jpg" loading="lazy" />
Thuộc tính loading="lazy" nhằm báo hiệu cho trình duyệt hình ảnh hoặc iframe hãy trì hoãn lại cho tới khi DOM được load xong.
<img src="template.jpg" loading="eager" />
Thuộc tính loading="eager" nhằm báo hiệu cho trình duyệt rằng hình ảnh hoặc iframe được load ngay lập tức khi chúng ta xem trang.
4. Đang cập nhật
Bài viết: Dùng CSS thay thế thư viện JavaScript được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.
Nhận xét
Đăng nhận xét
Ngon quá Minzy ơi
Trả lời XóaHihi cảm ơn bác
Trả lời Xóangon :3
Trả lời Xóa:D vip
Trả lời XóaVậy chứ loading="lazy" và loading="eager" xài cái nào đây?
Trả lời Xóadùng loading="lazy"
Trả lời Xóa