Thay hình bằng jQuery trên smartphone giúp website hiển thị hình ảnh phù hợp với màn hình thiết bị.
Giúp tối ưu giao diện, giảm dung lượng tải và cải thiện trải nghiệm người dùng trên smartphone.

Các bài viết có thể bạn quan tâm:
Scroll content popup Bootstrap bằng jQuery
Tạo hình 360 độ bằng JavaScript

Code html để thay hình bằng jQuery trên smartphone

Ví dụ với code html như bên dưới, chúng ta thêm class “sp_img” để có thể xác định hình nào cần thao tác.

/*Chèn hình thêm class "sp_img"*/
<img src="link hình 1" alt="img1" class="sp_img">
<img src="link hình 2" alt="img2" class="sp_img">
<img src="link hình 3" alt="img3" class="sp_img">

Code jquery

Thêm code jquery như bên dưới, khi màn hình hiển thị nhỏ hơn 767px thì tự động tìm các tab html có class “sp_img” và thay attr src của hình đó thành hình khác mà mình muốn ví du img.png => img-sp.png

if ($(window).width() < 767) {
  $("img.sp_img").each(function (i) {
    var src = $(this).attr("src");
    var newsrc;
    if (src.indexOf(".png") == -1) {
      newsrc = src.replace(".jpg", "-sp.jpg");
    } else {
      newsrc = src.replace(".png", "-sp.png");
    }
    $(this).attr("src", newsrc);
  });
}

Ví dụ

CodePen