- Tham gia
- 28/02/2015
- Bài viết
- 17,142
- Được Like
- 12,745
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:
Đầ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:
Ở đoạn code trên, nếu các bạn để ý thì thay vì chúng ta dùng thẻ “<img>” 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”:
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ẻ “<script>” để tiến hành sử dụng thư viện jQuery Lazy Load:
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ẻ “<img>” 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ột số tính năng có thể sử dụng trong jQuery Lazy Load
Demo cách sử dụng gộp các tính năng:
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.
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:
- Truy cập vào https://github.com/tuupola/jquery_lazyload và nhấn vào nút “Download ZIP”.
- Giải nén file vừa tải về, chúng ta sẽ được cấu trúc thư mục như sau:
- Các bạn hãy vào folder “jquery_lazyload-master” và sau đó copy file “jquery.lazyload.min.js”.
- Sau đó, các bạn hãy bỏ vào folder chứa website mà chúng ta xây dựng.
- 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é:
- Cài đặt hoàn tất
Đầ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ã:
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />Ở đoạn code trên, nếu các bạn để ý thì thay vì chúng ta dùng thẻ “<img>” 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”:
Mã:
<script type="text/javascript">
$(function() {
$("img.ten-lop-ban-tu-dat").lazyload({
effect : "fadeIn"
});
});
</script>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ẻ “<img>” 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ã:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<style type="text/css">
img {
float:left;
width: 500px;
height: 500px;
}
</style>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script>
</head>
<body>
<img src="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<img data-original="demo.gif" class="ten-lop-ban-tu-dat" />
<script type="text/javascript">
$(function() {
$("img.ten-lop-ban-tu-dat").lazyload({
effect : "fadeIn"
});
});
</script>
</body>
</html>Một số tính năng có thể sử dụng trong jQuery Lazy Load
Mã:
<script type="text/javascript">
$(function() {
$("img.ten-lop-ban-tu-dat").lazyload({
effect : "fadeIn",
threshold: 100,
event : "mouseover"
});
});
</script>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
Bài viết liên quan
Bài viết mới
