Khi Chrome chọn tệp ảnh để tải lên, cửa sổ chọn tệp xuất hiện rất chậm

Ngày cập nhật: 30/09/2017 | Số lần xem: 9.363 | Phân loại: Trình duyệt

Khi sử dụng thư viện Summernote để tải ảnh lên, người dùng có thể gặp phải tình trạng cửa sổ chọn tệp mở rất chậm, đặc biệt khi sử dụng trình duyệt Google Chrome.

Dưới đây là đoạn mã HTML gốc:

1

<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple" />

Tuy nhiên, chỉ cần sửa lại thuộc tính accept như sau, vấn đề sẽ được khắc phục hoàn toàn:

1

<input class="note-image-input form-control" type="file" name="files" accept="image/gif,image/jpeg,image/jpg,image/png" multiple="multiple" />

Sau khi thay đổi, cửa sổ chọn tệp sẽ hoạt động nhanh chóng và mượt mà hơn nhiều.

Khi bạn không liệt kê cụ thể các định dạng ảnh trong thuộc tính accept, Chrome sẽ thực hiện một yêu cầu kiểm tra an toàn đến máy chủ của Google nhằm xác minh liệu những định dạng đó có bị đánh giá là nguy hiểm hay không. Tuy nhiên, do lý do kỹ thuật (máy chủ Google không thể truy cập trực tiếp tại khu vực này), quá trình kiểm tra này thường dẫn đến trễ mạng, gây ra hiện tượng chậm trễ khi mở cửa sổ chọn tệp.

Dù đã có thông tin cho biết lỗi này đã được khắc phục ở phiên bản Chrome mới nhất, nhưng để đảm bảo trải nghiệm ổn định và không phụ thuộc vào kết nối Internet, cách tốt nhất vẫn là liệt kê rõ ràng các định dạng ảnh chấp nhận được.

Cải tiến thêm – Cách làm mượt mà hơn

Trên GitHub, một lập trình viên đã chia sẻ giải pháp gọn nhẹ hơn, giúp bạn không cần chỉnh sửa file JavaScript đã được nén (min.js). Bạn chỉ cần thêm đoạn mã sau vào bên trong hàm $(document).ready():

1
2
3
4

$(document).ready(function() {
  $('#summernote').summernote();
  $('.note-image-input').prop('accept', 'image/jpeg, image/jpg, image/png, image/gif');
});

Đoạn mã trên sẽ tự động cập nhật thuộc tính accept cho input chọn ảnh sau khi Summernote khởi tạo, từ đó tránh được việc sửa trực tiếp tệp nguồn hoặc tệp đã được tối ưu.

Kết luận

Mặc dù lỗi chậm trễ khi chọn tệp ảnh có thể khiến người dùng bối rối, nhưng việc điều chỉnh nhỏ ở thuộc tính accept là đủ để khắc phục hiệu quả. Nếu bạn đang phát triển ứng dụng với Summernote trên nền tảng Chrome, hãy áp dụng phương pháp này để cải thiện trải nghiệm người dùng.