Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Tự động thay thế ảnh gốc khi bị Not found
Tự động thay thế ảnh gốc khi bị Not found
Nguyễn Trung Hiếu
Share Code Web Company 2013

Tự động thay thế ảnh gốc khi bị Not found

Tut ngày hôm nay tôi muốn giới thiệu tới các bạn đó là tự động thay đổi một ảnh khác để hiển thị chèn vào vị trí bức ảnh không thể load được.

Các bạn làm website, nhiều khi gặp phải hiện tượng server không thể load 1 ảnh lên sẽ trông xấu xí như thế nào. Cũng giống như Sharecodeweb.net đang sử dụng một hình ảnh thay thế khác nếu như ảnh thumbnail không tìm thấy trên server nữa (có thể là do lỡ tay xóa nhầm chẳng hạn :). Đối với bài toán này thì chúng ta tạm thời sẽ có cách giải quyết sau đây:

  • Để nguyên, tìm được thì hiển thị, không thì thôi! ^^
  • Nếu các bạn thao tác trong asp.net thì có thể thực hiện trong hàm Page_load. Đó là sẽ kiểm tra đường dẫn của ảnh có tồn tại hay không, nếu có thì hiển thị, nếu không thì hiển thị 1 ảnh mặc định nào đó. Với cách này, thì yêu cầu server phải làm việc khá vất vả vì phải kiểm tra liên tục.
  • Các môi trường khác cũng tương tự.
  • Nếu các bạn làm việc với wp, thì bản thân wordpress đã có sẵn một hàm cho chúng ta giải quyết. Google nhé!

OK!, Vậy bài viết sau sẽ hướng dẫn bạn làm điều đó vô cùng đơn giản. Khác với cơ chế mà sharecodeweb.net đang sử dụng.
Đó là, bài viết này sử dụng Javascript để làm việc đó, đầu tiên là gán cho thẻ img một thuộc tính onerror chẳng hạn. Sau đó viết 1 function để thay thế giá trị trong thuộc tính src bằng giá trị dẫn tới ảnh mới cần hiển thị thay thế.
Đoạn code như sau

Rất đơn giản phải không nào, đây cũng là một cách để hiển thị một ảnh thay thế. Đối với cách này sẽ không làm chậm site của bạn đi, mà khiến cho tốc độ xử lý tăng lên rõ rệt.
Chúc bạn thành công!

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}