Đệm Bông Ép

Kết quả 1 đến 2 của 2

Chủ đề: Hướng dẫn sử dụng lazy load của jquery

  1. #1
    Thành Viên Mới
    Ngày tham gia
    Dec 2014
    Bài viết
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hướng dẫn sử dụng lazy load của jquery

    joomla lazyload images xin giới thiệu cách sử dụng plugin lazyload của jQuery
    Định nghĩa
    Lazy Load nhằm làm trễ việc load ảnh trong trang web. Ảnh nằm bên ngoài khung hình sẽ không load lên cho đến khi người dùng cuộn trang web tới nó. Sử dụng Lazy Load ở những trang web dài với nhiều hình ảnh sẻ giúp trang được tải nhanh hơn, trong một số trường hợp còn giúp giảm tải cho máy chủ web.

    Cách sử dụng:
    Trước tiên, bạn cần download jQuery tại trang jquery.com và plugin Lazy Load tại plugins.jquery.com/lazyload/
    Sau đó thêm các thư viện bên trong thẻ <head> như sau:
    Mã nguồn HTML:
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script><script type="text/javascript" src="js/jquery.lazyload.js"></script>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    Khi muốn 1 ảnh nào đó sử dụng lazyload, ta nên viết theo cú pháp sau:
    Mã nguồn HTML:
    <img class="lazy" data-original="images/example.jpg"/>[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    ta dùng chung một class cho tất các ảnh dùng lazyload( ở đây tôi dùng class=”lazy”) để ta có thể dễ dàng điều chỉnh các ảnh.
    lệnh jQuery như sau:
    Mã nguồn HTML:
    $(function(){$("img.lazy").lazyload();});[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    Cài đặt Threshold
    Mặc định khi ảnh được load, chúng sẽ hiển thị trên màn hình, nếu muốn ảnh được load sớm hơn, ta dùng thông số threshold, ví dụ cho giá trị threshold là 200, ảnh sẽ load 200pixels trước khi nó hiển thị trên khung hình
    Mã nguồn HTML:
    $(function(){  $("img.lazy").lazyload({     threshold: 200;  });});[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    Bạn có thể sử dụng sự kiện của jQuery như click hoặc mouseover, ví dụ: mặc định nó sẽ đợi đến khi người dùng cuộn xuống mới hiển thị trên khung hình, để load ảnh chỉ khi người dùng click vào chúng, ta có thể dùng:
    Mã nguồn HTML:
    $("img.lazy").lazyload({    event : "click"});[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    Mặc định plugin sẽ đợi đến khi ảnh load hết và gọi hàm show(), chúng ta cũng có thể chọn hiệu ứng ta muốn, như ví dụ này tôi dùng hiệu ứng fadeIn
    Mã nguồn HTML:
    $("img.lazy").lazyload({    effect : "fadeIn"});[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    Ta cũng có thể sử dụng plugin cho việc cuộn một container, ví dụ thẻ div với thanh cuộn
    Mã nguồn HTML:
    #contain {    height: 600px;    overflow: scroll;}$("img.lazy").lazyload({     container: $("#contain")});[COLOR=#242424][FONT=Noto Sans][/FONT][/COLOR]
    Có 1 điều hạn chế là khi dùng lazyload images sẽ không tốt cho SEO, joomla seo offpage sẽ hướng dẫn các bạn cách khắc phục, vừa sử dụng lazyload image, vừa không ảnh hưởng đến SEO ở bài sau. như vậy ta sẽ không ảnh hưởng đến việc quick search modules, article của google

  2. #2
    Thành Viên Mới
    Ngày tham gia
    Jan 2015
    Bài viết
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Lazy load này rất hay, với những trang dài mà có nhiều hình ảnh, bạn sẽ thấy được sự khác biệt như thế nào về tốc độ load của trang so với không dùng lazyload. Tốt nhất là với trang nào bạn cũng nên dùng, vì nó khá là đơn giản

Các Chủ đề tương tự

  1. HCM Lazy Dog - bán Phốc Sóc thuần chủng sinh tại HCM
    Bởi Lazy_dog trong diễn đàn Thú Cưng - Thú Nuôi - Gia Cầm
    Trả lời: 257
    Tin đăng cuối: 10-03-2016, 01:30 PM
  2. HCM Lazy Dog Rã bầy Husky 45 ngày tuổi sinh tại HCM
    Bởi Lazy_dog trong diễn đàn Thú Cưng - Thú Nuôi - Gia Cầm
    Trả lời: 8
    Tin đăng cuối: 11-08-2014, 08:51 AM
  3. HCM Lazy Dog - Rã bầy English Bulldog 40 ngày tuổi HCM
    Bởi Lazy_dog trong diễn đàn Thú Cưng - Thú Nuôi - Gia Cầm
    Trả lời: 9
    Tin đăng cuối: 10-03-2014, 08:56 AM
  4. HCM Lazy Dog-Chuyên dòng Samoyed - nàng bạch tuyết của núi rừng Nga
    Bởi Lazy_dog trong diễn đàn Thú Cưng - Thú Nuôi - Gia Cầm
    Trả lời: 75
    Tin đăng cuối: 09-30-2014, 09:19 AM
  5. HCM - Load Vizio dùng cho TV & PC (hàng USA)
    Bởi laptop79 trong diễn đàn Kho Máy Tính- Linh Kiện
    Trả lời: 0
    Tin đăng cuối: 06-07-2013, 10:10 AM

Quyền viết bài

  • Bạn Không thể gửi Chủ đề mới
  • Bạn Không thể Gửi trả lời
  • Bạn Không thể Gửi file đính kèm
  • Bạn Không thể Sửa bài viết của mình
  •