Tải hình ảnh một cách lười biếng với sự xuống cấp duyên dáng (JavaScript)

Question

Hãy xem xét một trang HTML với một nhóm thẻ có nội dung riêng. Tôi muốn chuyển đổi từng thẻ thành một trang chiếu trong trình chiếu được hỗ trợ bởi JavaScript. Mỗi thẻ có thể chứa hình ảnh và chúng phải được tải trong trình chiếu này. Tôi không muốn tất cả hình ảnh tải cùng một lúc.

Mặt khác, người dùng không bật JavaScript và công cụ tìm kiếm sẽ chỉ là đánh dấu xem và tất cả hình ảnh. Làm cách nào để tránh tải hình ảnh khi JavaScript được bật và làm cách nào để đảm bảo hình ảnh được tải khi JavaScript không được bật?

Một cách sẽ được thay thế toàn bộ hình ảnh với định dạng này:

<img src="" data-src="myimage.png"> 

Vấn đề với giải pháp đó là không có suy thoái duyên dáng.

Thay vào đó, tôi phải làm:

<img src="myimage.png"> 

Vấn đề với điều đó là bạn không thể ngăn chặn trình duyệt tải tất cả các hình ảnh trong trang HTML. Tôi đã cố gắng sửa đổi HTML theo nhiều cách khi tài liệu sẵn sàng. Ví dụ, thay thế tất cả các thuộc tính src trong ảnh bằng data-src, làm rỗng toàn bộ phần thân và vân vân.

Tôi có thực sự phải hy sinh sự xuống cấp duyên dáng không?

Xin cảm ơn trước.

Answer 1

Phương pháp đơn giản nhất có thể là sao chép các thẻ hình ảnh được đính kèm trong thẻ <noscript> và sử dụng thuộc tính src của chúng. Trên hoặc dưới đây, bạn có thể có cùng các thẻ với thuộc tính tuỳ chỉnh data-src, phát hiện và tải chúng xuống bằng Javascript.

Answer 2

Bạn có thể bao gồm cả hai phiên bản:

<img src="" data-src="myimage.png"> 
<noscript> 
    <img src="myimage.png"> 
</noscript> 

Có thể đối xử tốt với mối liên hệ giữa <img> thẻ riêng có để mã JavaScript của bạn có thể giữ chúng trong đồng bộ. Ví dụ:

<img src="" class='lazy' data-master="myimage"> 
<noscript> 
    <img id="myimage" class='super-sized interesting' src="myimage.png"> 
</noscript> 

Sau đó, mã JS của bạn có thể chắc chắn rằng "scripty" hình ảnh nhặt các lớp học vv để bạn không phải tự giữ hai phiên bản cập nhật (tha thứ ví dụ jQuery; tất nhiên tuy nhiên, bạn muốn thực hiện điều này theo ý muốn):

$('img.lazy').each(function() { 
    var $lazy = $(this), 
    master = $('#' + $lazy.data('master'))[0]; 

    $lazy.src(master.src); 
    $lazy.className += master.className; 
    // etc 
});