Hướng dẫn Tìm hiểu và cách sử dụng jQuery Lazy Load

Thảo luận trong 'JavaScript/jQuery' bắt đầu bởi PVS, 23/06/2017.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,755
    Đã được thích:
    7,003
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Tìm hiểu và cách sử dụng jQuery Lazy Load

    Chắc hẳn trong quá trình xây dựng Website, ít nhiều các bạn cũng từng nghĩ làm cách nào để có thể giảm tải bớt băng thông cho việc load hình ảnh trên Website, nhất là những trang người dùng chỉ load vào xem nội dung rồi vội vàng ra đi. Như thế thì chúng ta vô tình lại tốn băng thông nhưng lại không giúp ích gì được cho chúng ta. Vậy làm sao để hạn chế điều này? Có cách nào có thể giúp người dùng cuộn trang tới đâu, hình ảnh load tới đó không? Câu trả lời là có và mình sẽ giới thiệu với các bạn đến với jQuery Lazy Load Plugin để có thể thực hiện được việc này.

    Giới thiệu và cài đặt
    Tác giả: Mika Tuupola

    Website: http://www.appelsiini.net/projects/lazyload

    jQuery Lazy Load được xây dựng giúp người dùng cuộn tới đâu, load hình tới đó giúp cho việc giảm tải băng thông cho Website.

    Để có thể cài đặt jQuery Lazy Load các bạn cần thực hiện các bước sau:

    1. Truy cập vào https://github.com/tuupola/jquery_lazyload và nhấn vào nút “Download ZIP”.
    2. Giải nén file vừa tải về, chúng ta sẽ được cấu trúc thư mục như sau: 1.png
    3. Các bạn hãy vào folder “jquery_lazyload-master” và sau đó copy file “jquery.lazyload.min.js”.
    4. Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
    5. Tiến hành thêm thư viện vào trong website của chúng ta, nhưng các bạn cũng cần phải tải thư viện jQuery tại http://jquery.com về trước nhé: 2.png
    6. Cài đặt hoàn tất
    Sử dụng
    Đầu tiên, để sử dụng thư viện này, các bạn hãy chuẩn bị cho mình 1, 2 hoặc nhiều tấm hình trở lên. Cụ thể ở đây mình sẽ có tấm hình “demo.gif”:

    Tiếp theo, chúng ta sẽ load tấm hình đó vào HTML và hãy nhân bản lên thành nhiều tấm để tiện cho việc chúng ta tập cách sử dụng:
    Mã:
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
    Ở đoạn code trên, nếu các bạn để ý thì thay vì chúng ta dùng thẻ “” và có thuộc tính “src” để chỉ rõ đường dẫn của tấm hình thì nay nó đã được thay thế bằng “data-original” và cách gán đường dẫn giống với thuộc tính “src”:

    2.png
    Các bạn cũng nên định nghĩa một tên class để tiện cho việc tìm đến những tấm ảnh này thông qua jQuery. Sau đó, các bạn hãy dùng thẻ “
    Sau khi thực hiện đoạn code này, chúng ta đã thành công trong việc sử dụng thư viện rồi đấy. Thông qua việc sử dụng phương thức “lazyload()” ở thẻ “” mà bạn chỉ định. Và đối số trong phương thức “lazyload()” chính là một đối tượng chứa các tính năng mà bạn có thể tùy biến theo hướng dẫn của tác giả Plugin jQuery Lazy Load.

    Và đoạn code đầy đủ của nó sẽ như sau:
    Mã:
    
    
    
        
        
        Test   
        
           
        
    
    
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
           
        
    
    
    Một số tính năng có thể sử dụng trong jQuery Lazy Load

    3.png
    Demo cách sử dụng gộp các tính năng:
    Mã:
        
    Bài viết này chỉ thống kê ngắn gọn các tính năng của jQuery Lazy Load. Bạn có thể tải file demo-jquery-lazy-load tại file đính kèm.

    Chúc các bạn thành công.


    Nguồn: thienanblog.com​
     

    Các file đính kèm:

    Bài viết mới
    Death Aloha thích bài này.
  • Death Aloha

    Death Aloha Thượng Đế

    Tham gia:
    25/11/2015
    Bài viết:
    70
    Đã được thích:
    44
    Điểm thành tích:
    18
    Web:
    tuyệt. Nhưng có 1 vấn đề là không biết google robot có thu thập được hình ảnh trong bài viết không nhỉ nếu dùng lazy load này =))
     
  • Chia sẻ trang này