Tối ưu hiệu suất Website với Lazy Loading và Intersection Observer trong Javascript
HTML-код
- Опубликовано: 5 фев 2025
- Tham gia các khoá học của mình tại ZendVN:
Javascript Nâng cao: www.zendvn.com...
VueJs: www.zendvn.com...
NuxtJs: www.zendvn.com...
NextJs: www.zendvn.com...
Kết nối với mình tại Facebook: / congluc1902
Em cám ơn anh về bài giảng bổ ích này!
Anh đã cho em lời giải của đúng cái em đang thắc mắc bấy lâu nay 😅
Chúc anh nhiều sức khoẻ và ra thêm nhiều video hữu ích nữa ạ ^ ^
tim mạnh cho anh Lực toàn video hay với lạ
Mới biết tới kênh của bạn . Cách giảng dễ hiểu và nội dung chất lương
Cho mình một chia sẻ để nhiều người cũng biết nhé. Cám ơn bạn ^^.
Không thể không bình luận được, Bổ ích, dễ hiểu quá. Cảm ơn a
Ngắn ngọn dễ hiểu quá anh ạ. Tks a
Toàn các kiến thức thực tế thiết thực ak. Hay quá anh
Anh giảng dễ hiểu, dễ hình dung. Mong anh ra nhiều video nữa.
kiến thức hay quá, cảm ơn a đã chia sẻ
Anh giảng hay với dễ hiểu thật sự
giọng rõ, dễ nghe là khoái rồi +1 sub haha
Cách truyền đạt rất hay, nghe rất cuốn!
Hay lắm bro, kiến thức mới, trước giờ toàn dùng lib
Hay quá anh ơi, giọng anh nghe rõ ràng nói dễ hiểu, ví dụ minh họa khá rõ ràng. Cảm ơn anh ạ.
Công nhận, search bác này nói nghe phát hiểu luôn :)
Cảm ơn anh nhiều nhé, kiến thức bổ ích và dễ hiểu lắm ạ
Ui đúng cái e đang tìm . Cảm ơn anh nhiều lắm a
toẹt vời, truyền đạt dễ hiểu
Wow bài giảng rất hay và đúng trọng tâm, cảm ơn anh
Cảm ơn anh đã chia sẻ
rất bổ ích ạ. Đáng giá 17p
quá đẳng cấp
Em cảm ơn anh đã chia sẻ.
video rất hay và dễ hiểu, cám ơn bạn rất nhiều
bài giải rất hay. mong anh ra video sử dụng trong reactjs ạ
hay quá anh
quá hay anh ạ
Hay quá ạ, cảm ơn anh !!
cảm ơn a ạ
thanks, rat hay luon
ước gì biết anh sớm hơn
tuyệt vời quá anh ơi
Cám ơn a ạ
Hay anh ơi
hay cảm ơn bro nhiều
hay quá bro ưi
hay bạn
Such a nice video! I enjoy watching it in full. Have a nice day!👍🍞😀❤️👉!!!
Thank you! You too!
giọng hay quá b
ngon :3
Hay đó bạn, mà còn. Thiếu nhiều
anh cho em hỏi là nếu mình dùng wordpress, thì phải tạo childtheme ghi đè lên thẻ img mặc định hay có hàm nào có thể can thiệp trực tiếp vào thẻ img bằng function.php không ạ, mong anh giải đáp giúp em ạ
trong trường hợp có những image trong tầm nhìn và không trong tầm nhìn thì em thấy nó đang gọi hết, thì có cách nào khi cuộn xuống thì mới gọi những ảnh bị khuất không ạ
A học mấy cái này ở đâu vậy a
Cách này rất hay, nhưng không biết có load được ảnh trước khi ảnh intersect không nhỉ? ví dụ còn scroll 100px nữa là thấy ảnh thì mình bắt đầu load ảnh luôn
Bạn thử với một số config thêm trong phần options nhé, Ví dụ rootMargin
developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
trong thẻ body của em để 20 cái thẻ img(1view port 6 ảnh). bên js em observer 20 cái thẻ này, nhưng console.log(entry.isIntersecting) nó ra true hết, anh biết tại sao không
biết a qua group angular, a có làm video về angular ko zợ anh :??
Hiện tại thì chưa e nha ^^. Angular e theo dõi Admin bên đó kìa e.
cái này có trong khóa js nâng cao zend hk a
Trong khoá nâng cao có học về mô hình Observer Pattern nha em.
@ dạ, mà có mấy phân tối ưu code như video này hk a, hay chỉ là mô hình thôi ạ
cho em hỏi là theme anh đang sử dụng cho VS Code là gì v ạ?
Thêm này nha e: Dracula Official
anh cho em hỏi là khi em để remove('lazy-src') thì khi scroll lại nó vẫn chạy và trả về null và em thấy nó vẫn tốn time ạ, nếu để remove thì có tốn thời gian hơn không ạ
Hi e, vấn đề vẫn chạy không liên quan tới lazy-src nha e. Khi e đã xử lý xong tấm hình đó rồi thì e gọi thêm một hàm unobserve để ngừng quan sát nó nhé. Tài liệu ở đây:
developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/unobserve
@ dạ em cảm ơn anh ạ
let observer = new IntersectionObserver((entries)=>{
entries.forEach(entry =>{
if (entry.isIntersecting) {
load(entry.target);
observer.unobserve(entry.target);
}
});
});
anh có thể cho em xin source code được không ạ
Em xem ở đây nhé: codepen.io/congluc1902/pen/yLoXBVB
CLS: paddingtop :)) magic
magic gì vậy e ^^
&::before{content:'';padding-top:100%;display:block;} 😂😂😂
&::before{content:'';padding-top:100%;display:block;} 😂😂😂
@@Teddy29 haha
Haha. Hảo học trò @Vy @Vu :3
Hay quá anh ưi