Tối ưu hiệu suất Website với Lazy Loading và Intersection Observer trong Javascript

Поділитися
Вставка
  • Опубліковано 12 гру 2024

КОМЕНТАРІ • 71

  • @PhamHa-o2b
    @PhamHa-o2b Рік тому +1

    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 ạ ^ ^

  • @hunglebao939
    @hunglebao939 3 роки тому +2

    tim mạnh cho anh Lực toàn video hay với lạ

  • @namhoang8371
    @namhoang8371 2 роки тому

    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

    •  2 роки тому

      Cho mình một chia sẻ để nhiều người cũng biết nhé. Cám ơn bạn ^^.

  • @datminh4841
    @datminh4841 Рік тому

    Ngắn ngọn dễ hiểu quá anh ạ. Tks a

  • @DenDenCover
    @DenDenCover 2 роки тому

    Không thể không bình luận được, Bổ ích, dễ hiểu quá. Cảm ơn a

  • @anhtuantran5748
    @anhtuantran5748 3 роки тому +1

    Hay lắm bro, kiến thức mới, trước giờ toàn dùng lib

  • @xastressbangcode
    @xastressbangcode Рік тому

    rất bổ ích ạ. Đáng giá 17p

  • @hawind4121
    @hawind4121 Рік тому

    Em cảm ơn anh đã chia sẻ.

  • @NguyenHieu-dc1dc
    @NguyenHieu-dc1dc 3 роки тому

    Cách truyền đạt rất hay, nghe rất cuốn!

  • @vanhanguyen5658
    @vanhanguyen5658 3 роки тому +1

    kiến thức hay quá, cảm ơn a đã chia sẻ

  • @lquaiduy3573
    @lquaiduy3573 2 роки тому

    Anh giảng dễ hiểu, dễ hình dung. Mong anh ra nhiều video nữa.

  • @KienNguyen-sg1nf
    @KienNguyen-sg1nf 3 роки тому

    Toàn các kiến thức thực tế thiết thực ak. Hay quá anh

  • @namhoai452
    @namhoai452 2 роки тому +1

    bài giải rất hay. mong anh ra video sử dụng trong reactjs ạ

  •  2 роки тому

    video rất hay và dễ hiểu, cám ơn bạn rất nhiều

  • @bannguyen7260
    @bannguyen7260 3 роки тому

    toẹt vời, truyền đạt dễ hiểu

  • @LongPham-ll7ph
    @LongPham-ll7ph 3 роки тому +1

    giọng rõ, dễ nghe là khoái rồi +1 sub haha

  • @huyvule7282
    @huyvule7282 3 роки тому +1

    Cảm ơn anh nhiều nhé, kiến thức bổ ích và dễ hiểu lắm ạ

  • @MaiNgocDoan1809
    @MaiNgocDoan1809 2 роки тому

    Wow bài giảng rất hay và đúng trọng tâm, cảm ơn anh

  • @hoanchaukhai7942
    @hoanchaukhai7942 3 роки тому +1

    Anh giảng hay với dễ hiểu thật sự

  • @callmemin0208
    @callmemin0208 3 роки тому +1

    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 ạ.

    • @angson7978
      @angson7978 3 роки тому

      Công nhận, search bác này nói nghe phát hiểu luôn :)

  • @K.Huynh.
    @K.Huynh. 2 роки тому

    Cảm ơn anh đã chia sẻ

  • @ngohieu1248
    @ngohieu1248 3 роки тому +1

    Ui đúng cái e đang tìm . Cảm ơn anh nhiều lắm a

  • @vuongqtvn
    @vuongqtvn 3 роки тому +1

    quá đẳng cấp

  • @minhtien7016
    @minhtien7016 2 роки тому +1

    thanks, rat hay luon

  • @baoduy7198
    @baoduy7198 3 роки тому +1

    ước gì biết anh sớm hơn

  • @nguyenchuong4861
    @nguyenchuong4861 3 роки тому +1

    Hay quá ạ, cảm ơn anh !!

  • @nghiabasil
    @nghiabasil Рік тому

    quá hay anh ạ

  • @lamnguyenhuuphuc2203
    @lamnguyenhuuphuc2203 3 роки тому +2

    cảm ơn a ạ

  • @phanthang97202
    @phanthang97202 2 роки тому

    tuyệt vời quá anh ơi

  • @datistpham1317
    @datistpham1317 3 роки тому +1

    hay cảm ơn bro nhiều

  • @juhandvan
    @juhandvan Рік тому

    Cám ơn a ạ

  • @duyhyhoangcong9226
    @duyhyhoangcong9226 3 роки тому +2

    hay quá anh

  • @nhuannguyen8509
    @nhuannguyen8509 3 роки тому

    Hay đó bạn, mà còn. Thiếu nhiều

  • @tanvuong2607
    @tanvuong2607 3 роки тому +1

    Hay anh ơi

  • @CitiesRauMá
    @CitiesRauMá 3 роки тому +1

    hay quá bro ưi

  • @ochickuusa-cuocsongmy7475
    @ochickuusa-cuocsongmy7475 3 роки тому

    Such a nice video! I enjoy watching it in full. Have a nice day!👍🍞😀❤️👉!!!

    •  3 роки тому

      Thank you! You too!

  • @hunghahuy9318
    @hunghahuy9318 Рік тому

    hay bạn

  • @tieulinh99
    @tieulinh99 3 роки тому

    giọng hay quá b

  • @TuanTran-jn4tt
    @TuanTran-jn4tt 10 місяців тому

    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 ạ

  • @NguyenHung-hb3sb
    @NguyenHung-hb3sb 2 роки тому

    ngon :3

  • @sonlequang5843
    @sonlequang5843 2 роки тому

    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 ạ

  • @anywhereloc2969
    @anywhereloc2969 2 роки тому

    A học mấy cái này ở đâu vậy a

  • @atNguyen-sy3il
    @atNguyen-sy3il 2 роки тому

    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

  • @ongke3655
    @ongke3655 3 роки тому +1

    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

    •  3 роки тому +1

      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

  • @baynguyenvan2695
    @baynguyenvan2695 3 роки тому

    biết a qua group angular, a có làm video về angular ko zợ anh :??

    •  3 роки тому

      Hiện tại thì chưa e nha ^^. Angular e theo dõi Admin bên đó kìa e.

  • @vyphamgia3988
    @vyphamgia3988 3 роки тому +1

    CLS: paddingtop :)) magic

    •  3 роки тому +1

      magic gì vậy e ^^

    • @Teddy29
      @Teddy29 3 роки тому +1

      &::before{content:'';padding-top:100%;display:block;} 😂😂😂

    • @Teddy29
      @Teddy29 3 роки тому +1

      &::before{content:'';padding-top:100%;display:block;} 😂😂😂

    • @vyphamgia3988
      @vyphamgia3988 3 роки тому

      @@Teddy29 haha

    •  3 роки тому +2

      Haha. Hảo học trò @Vy @Vu :3

  • @LongNguyen-vb3ks
    @LongNguyen-vb3ks 3 роки тому

    cho em hỏi là theme anh đang sử dụng cho VS Code là gì v ạ?

    •  3 роки тому +1

      Thêm này nha e: Dracula Official

  • @upagency7439
    @upagency7439 2 роки тому

    cái này có trong khóa js nâng cao zend hk a

    •  2 роки тому

      Trong khoá nâng cao có học về mô hình Observer Pattern nha em.

    • @upagency7439
      @upagency7439 2 роки тому

      @ 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 ạ

  • @BDCCN_NguyenCaoHiep
    @BDCCN_NguyenCaoHiep 3 роки тому

    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 ạ

    •  3 роки тому +1

      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

    • @BDCCN_NguyenCaoHiep
      @BDCCN_NguyenCaoHiep 3 роки тому

      @ dạ em cảm ơn anh ạ

    • @phamnhat4781
      @phamnhat4781 3 роки тому +1

      let observer = new IntersectionObserver((entries)=>{
      entries.forEach(entry =>{
      if (entry.isIntersecting) {
      load(entry.target);
      observer.unobserve(entry.target);
      }
      });
      });

  • @LuniInTheMoon
    @LuniInTheMoon 3 роки тому +1

  • @anphan128
    @anphan128 3 роки тому

    anh có thể cho em xin source code được không ạ

    •  3 роки тому

      Em xem ở đây nhé: codepen.io/congluc1902/pen/yLoXBVB

  • @ngocchinh2266
    @ngocchinh2266 3 роки тому +1

    Hay quá anh ưi