Giải pháp responsive hình ảnh với javaScript

  • JavaScript
  • 19 tháng 11 2013
  • bởi Văn Khương
  • 0 Comments

Ở 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ề giễ 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 giự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à giễ 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, ...

  • Chia sẻ
comments powered by Disqus