.error()

Định nghĩa và sử dụng

  • Khi có lỗi xảy ra do một thành phần gặp lỗi có thể là do thành phần được tải không chính xác, khi đó .error() sẽ kích hoạt sự kiện lỗi hoặc thực hiện một function.

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.0

.error()

$('img').error();
  • Đã được thêm vào từ phiên bản 1.4.3

.error(function(){...})

$('img').error(function() {
    $('img').replaceWith('<p>Error loading image!</p>');
});

.error()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').error(function(){
        $('img').replaceWith('<p>Error loading image!</p>');
    });
    $('button').click(function(){
        $('img').error();
    });
});
</script>
</head>

<body>
<img src="/common/images/logo.gif" alt="Học Web Chuẩn" /><br />
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Ta thấy khi click button thì sự kiện lỗi đã được gọi

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery - button được click

<img src="/common/images/logo.gif" alt="Học Web Chuẩn" /><br />
<button>Click</button>

<p>Error loading image!</p><br />
<button>Click</button>

.error(function(index){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('img').error(function() {
        $(this).hide();
    }).attr('src','/common/images/img_missing.gif');;
});
</script>
</head>

<body>
<img src="images/logo.gif" alt="Học Web Chuẩn" />
</body>
</html>

Hiển thị trình duyệt:

Nhìn vào kết quả ta thấy: hình logo.gif không hiển thị vì đường dẫn không chính xác, khi đó function sẽ xử lý .hide() thành phần bị lỗi đi và thay thế thuộc tính src bằng đường dẫn tới một tấm hình mới /common/images/img_missing.gif, với cách này ta sẽ thay thế tất cả image bị lỗi bằng một image mới.

So sánh code HTML trước và sau khi có jQuery:

Trước khi có jQuery Sau khi có jQuery

<img src="images/logo.gif" alt="Học Web Chuẩn" />

<img src="/common/images/img_missing.gif" alt="Học Web Chuẩn" />

.eq()

.fadeIn()