Hướng dẫn Cách sử dụng javaScript để responsive hình ảnh

[PVS]

Cách sử dụng javaScript để responsive hình ảnh

Ở bài viết trước chúng ta đã tìm hiểu về các giải pháp cho responsive hình ảnh với HTML5 nhưng đó là tương lai gần, trước khi chờ W3C chính thức công bố và các trình duyệt bắt đầu cập nhật chúng ta cần đến những giải pháp bằng javaScript.

Picturefill
Một plugin nhỏ gọn chỉ 2KB của tác giả Scott Jehl, việc sử dụng gần giống như sử dụng phần tử picture và source. Picturefil được viết không yêu cầu bạn phải có thư viện jQuery bạn chỉ cần picturefill.js và viết mã đánh dấu theo đúng cấu trúc. Ví dụ:

<span data-picture data-alt="">
<span data-src="small.jpg"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<!-- Tải hình trường hợp không có javaScript -->
<noscript><img src="small.jpg" alt=""></noscript>
</span>

Mặc dù không nhất thiết bạn phải responsive design trên IE8 và các trình duyệt cũ của IE bởi các thiết bị thông minh đều sử dụng trình duyệt mới nhưng nếu bạn vẫn muốn thì có thể viết thêm một chút vì IE8 không hỗ trợ media query. Ví dụ bạn thêm vào trước noscript:

<!--[if (lt IE 9) & (!IEMobile)]>
    <span data-src="medium.jpg"></span>
<![endif]-->

Giải pháp này đơn giản và dễ hiểu chỉ có nhược điểm như đã nói là mã đánh dấu trở nên nhiều và phải đúng cấu trúc.

Hisrc
Một plugin được viết bởi Marc Grabanski và Christopher Schmitt, trong mã đánh dấu HTML với phần tử img bạn thêm thuộc tính data-1x và data-2x để xác định tỉ lệ độ phân giải của trình duyệt và thiết bị từ đó sẽ có đường dẫn ảnh tương ứng. Ví dụ:

<img src="image.jpg" data-1x="image400x200.jpg" data-2x="image800x400.jpg" class="hisrc" />

Sau khi tạo mã đánh dấu như trên bạn chỉ việc gọi hàm hisrc() khi tài liệu được tải xong, như sau:

$(document).ready(function(){
  $(".hisrc").hisrc();
});

Có thể thấy giải pháp này hữu dụng trong trường hợp dựa theo tỉ lệ độ phân giải nhưng không thấy tùy chọn với media query và một điều không hay nữa là hình ảnh trong thuộc tính src của phần tử img luôn được tải. Sau khi script được chạy xong thì hình mới được thay thế bởi hình khác, thực ra hình không phải thay thế hình mà là tạo ra một hình nền cho phần tử img.

responsive-images.js
Một ứng dụng javaScript rất hay của tác giả Koen Vendrik. Để sử dụng thì chỉ cần 1 file duy nhất và nên để ở footer trong tài liệu HTML.

<script src='responsive-img.min.js'></script>

Cấu trúc HTML khá sạch và dễ hiểu với việc sử dụng thuộc tính data-src.

<img alt='kitten!' data-src-base='demo/images/' data-src='<480:smallest.jpg, <768:small.jpg, <960:medium.jpg, >960:big.jpg' />

Sử dụng thêm noscript cho trường hợp không có javaScript

<noscript><img alt='kitten!' src='demo/images/medium.jpg' /></noscript>

Plugin hiện hỗ trợ khá tốt trên những trình duyệt đang phổ biến, ngoài ra còn có tùy chọn để hỗ trợ cho tỉ lệ độ phân giải trên trình duyệt và thiết bị với thuộc tính data-src2x cho tỉ lệ 1.2 đơn cử như trên các màn hình có retina của apple, đây thực sự là một plugin nhỏ gọn và khá tốt.

Ngoài ra để tự động làm thay đổi lại kích thước hình ảnh cũng có một số giải pháp javaScript của các nhà cung cấp như: MOBIFY.JS, RESRC.IT, RESIZE.LY, ...

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

Nguồn: sothichweb.com​