Jquery tối ưu cho web khi sử dụng hình ảnh
Bài đăng này đã không được cập nhật trong 7 năm
1. jQuery Picture Đối với một giao diện được thiết kế responsive, thì việc hình ảnh (nội dung) trong đó cũng đáp ứng (responsive) theo là điều cần thiết để đảm bảo tính thẩm mỹ cho website của bạn. Bạn không thể để website hiện thị trong khung giao diện 400 x 800 pixcel mà kích thước hình ảnh lại lên đến 600 hay 800 pixcel được. Việc cần phải làm ở đây là đưa kích thước hình ảnh về trong khung giới hạn đó, và nếu không quan tâm đến dung lượng, bạn có thế giải quyết vấn đề này một cách rất đơn giản chỉ với vài dòng css.
.imgResponse img
{
max-width: 100% !important;
height: auto;
display: block;
}
Đây là đoạn code giúp bạn có thể làm cho 1 tấm hình khi dc load lên nó sẽ đúng tỉ lệ theo chiều dọc và chiều ngang bang đầu của nó. Tuy nhiên khi dữ liệu web bạn nhiều lên, trên 1 trang hiện thị nhiều hình ảnh với kích thước lớn, bạn sẽ nhận thấy vấn đề cần phải giải quyết ở đây. Mặc dù bạn đã bắt hình ảnh co theo khung giao diện để đảm bảo tính thẩm mỹ cho web, hình ảnh kích thước 600 - 800 bạn co lại về 400 pixcel nhưng bản chất dung lượng không hề thay đổi? Với một website hiện thì từ 10 - 20 hình ảnh như vậy dung lượng có thể lên đến gần 2 Mb, điều này hoàn toàn không tốt cho một website dành cho thiết bị di động. Mỗi người dùng sử dụng 1 thiết bị smartphone khác nhau, và mỗi thiết bị lại có độ phân giải khác nhau, vậy làm cách nào để chúng ta lựa chọn được 1 hình ảnh có kích thước phù hợp nhất mà không phải "ép khung" như trên? jQuery Picture sẽ giúp chúng ta giải quyết vấn đề này
- jQuery Picture là một plugin rất nhỏ gọn, nó hỗ trợ bạn response hình ảnh cho website của bạn. Hoạt động theo nguyên tắc dựa trên tỷ lệ màn hình thiết bị để đưa ra lựa chọn hình ảnh tối ưu nhất. Hoạt động tốt trên hầu hết tất cả các trình duyệt.
2. Lazy Load của jQuery 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 khi tải về bạn khai báo trong file html
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.lazyload.min.js"></script>
Khi ta muốn 1 ảnh nào đó sử dụng lazyload, ta nên viết theo cú pháp sau:
<img class="lazy" data-original="images/example.jpg"/>
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:
$(function(){
$("img.lazy").lazyload
});
Một số tính năng có thể sử dụng trong jQuery Lazy Load threshold: Load trước số pixel chỉ định event: Thực hiện load hình ảnh khi sự kiện chỉ định được gọi effect: Hiệu ứng load hình ảnh skip_invisible: Bỏ qua các hình ảnh không được hiển thị trong viewport failure_limit: Chạy vòng lặp kiểm tra hình ảnh load bị lỗi với số lần quy định
Dưới đây là 1 ví dụ cụ thể, bạn có thể thữ nghiệm nó
<!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" />
<script type="text/javascript">
$(function() {
$("img.ten-lop-ban-tu-dat").lazyload({
effect : "fadeIn"
});
});
</script>
</body>
</html>
bạn có thể xem chi tiết hơn ở đây :https://xuanhanx.wordpress.com/2015/01/21/huong-dan-su-dung-lazy-load-cua-jquery/
All rights reserved
