0

Cách dùng javascript thay thế ảnh lỗi bằng ảnh mặc định

Dạo này bận quá, không có thời gian post bài mới luôn. Ngón tay thì lười biếng và cứng đơ khi đặt lên bàn phím mỗi đêm. Haizzz… than vãn một xíu với các bạn. Tình hình là mới gặp một vấn đề nhỏ trong dự án đang làm, và thấy khá thú vị nên note lại để chia sẻ.

Vấn đề

Mình đang làm một dự án website báng hàng qua mạng. Danh mục sản phẩm khá lớn được cập nhật qua Excel, rồi được biên tập lại sau đó thông qua backend của hệ thống. Vấn đề bắt đầu phát sinh là dữ liệu Excel không được đồng bộ cho lắm, nên hình ảnh sản phẩm cái có cái không, hiển thị lên web trông rất xấu vì sự khập khiễng đó. Dĩ nhiên Mr.BOSS ngay tức khắc yêu cầu đội dự án thêm hình mặc định (đại loại là “sản phẩm đang cập nhật”) lên tự động thay thế cho các hình ảnh chưa có đó. . Mọi người đưa ra nhiều ý kiến:

  1. Dùng CSS set sẵn ảnh mặc định, dùng JS download ảnh thumb sản phẩm về chèn vào, nếu không có ảnh thì thôi.
  2. Dùng PHP kiểm tra file ảnh tồn tại hay không, không thì echo ảnh mặc định ra (Cách này rất tồi! đừng làm theo.)
  3. Mình đề nghị cách dùng JS kiểm tra các ảnh lỗi và thay thế bằng 1 ảnh mặc định.

Bạn nào muốn xử lý ảnh lỗi thì thử cách 1 và 3 nhé, cách 2 rất là tồi, nó tạo ra áp lực rất lớn cho máy chủ khi chạy trên hệ thống có nhiều hình ảnh như trang bán hàng lớn. Với cách 1, chúng ta lại cần chuẩn bị dữ liệu để tải về cho từng vị trí ảnh, và cũng không chắc là dữ liệu đó có tồn tại ảnh thật không, cũng vẫn tăng độ phức tạp khi xử lý vấn đề dữ liệu sai. Mình thấy cách thứ 3 là đơn giản nhất, cứ dùng PHP render ảnh ra, để trình duyệt download về, cái nào bị lỗi thì sẽ biết ngay qua event error của HTML Dom, có thể dễ dàng thay thế bằng ảnh mặc định.

Làm thế nào dùng javascript thay thế ảnh lỗi bằng ảnh mặc định?

Đoạn code đơn giản mình dùng jquery handle sự kiện error trên tất cả các thẻ img trên trang, khi có lỗi thì thay source bằng link ảnh mặc định.

Tuy nhiên cách nào cũng có yếu điểm của nó, cách này sẽ làm cho trang web của bạn tải nhiều hơn, hiển thị chậm hơn. Mặc dù các thành phần khác có thể đã hiển thị lên rồi nhưng các link 404 sẽ vẫn tiếp tục tải và đợi, trình duyệt sẽ vẫn “xoay tròn” cho đến khi time-out ảnh mặc định mới thay thế vào. Điều này làm tăng đáng kể thời gian tải trang nhất là khi sever của website cài đặt thời gian time-out của HTTP request quá lâu, cũng làm tăng đáng kể sự khó chịu của khách khi nhìn thấy “nó” xoay tròn – nhưng ít ra còn đỡ hơn là không có ảnh ở chỗ cần có.

Trong demo, mình có hai hình ảnh tương tự như hai ảnh của sản phẩm. Trong đó có một ảnh chứa đường dẫn ảnh sai (Error 404 – Không có file ảnh)

DEMO


Chúc các bạn tăng tốc dự án của mình thật nhanh nhé! Thân.

Bình luận với Facebook

Hoàng Tựa

Yêu thích lập trình web và tạo ra những thứ đẹp đẽ.

Leave a Reply

Your email address will not be published. Required fields are marked *