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

Nguồn tin: Walking Alone

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 reponsive 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) &#038; (!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 class="hisrc" alt="" src="image.jpg" data-1x="image400x200.jpg" data-2x="image800x400.jpg" />

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. 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, …

WalkingAlone Đăng ký: Viet Blogs

Nguồn tin