javascript lười biếng tải cách nâng cao tiến bộ?

Question

Tôi đang tạo trang web cho chủ sở hữu thư viện có nhiều hình ảnh trên mỗi trang web. Vì vậy, tôi muốn tải hình ảnh trên trang web một cách lười biếng, làm cho tải ban đầu là ít nặng hơn. Tuy nhiên, tôi muốn thực hiện điều này theo cách "nâng cao tiến bộ".

Tôi đã tìm thấy rất nhiều phương thức tải chậm nhưng tất cả đều yêu cầu không phù hợp với mã html theo cách mà trang web sẽ vô ích khi tắt javascript. (ví dụ: thuộc tính src của các thẻ img vẫn chưa được đặt cho đến khi hình ảnh được tải xuống).

Để thực hiện một phương pháp bốc lười biếng progressivly Tôi nghĩ rằng người ta sẽ cần những điều sau đây:

1. ngăn chặn các trình duyệt từ lấy những hình ảnh, mặc dù Thers đang ở trên trang, nhưng chỉ làm điều này khi javascript trên (vì vậy trên các trình duyệt không phải javascript, hình ảnh vẫn còn tải như bình thường). Điều này nên được thực hiện mà không thay đổi html.
2. lưu các thuộc tính src trong một thuộc tính data-src
3. sequentually tải những hình ảnh khi di chuyển xuống

Trong số này ba bước đầu tiên dường như những khó khăn nhất. Ngay cả this stackoverflow discussion cũng không cung cấp câu trả lời không làm hỏng nâng cao tiến bộ.

Có ai có ý tưởng nào không?

Answer 1

Vì không có câu trả lời nào, tôi sẽ đăng nội dung tôi tìm được giải pháp hợp lý.

Sự cố này tóm tắt những điều sau: trong khi chúng tôi muốn ngăn trình duyệt tải xuống hình ảnh khi javascript được bật, chúng tôi phải đảm bảo rằng hình ảnh được tải xuống khi javascript bị tắt hoặc không khả dụng.

Thật khó có thể liên tục sử dụng javascript để ngăn chặn tải hình ảnh trên một trang khi họ theo định dạng "bình thường":

<img src="path/to/image.jpg"></img> 

Để ngăn chặn các hình ảnh từ tải chúng tôi phải loại bỏ src của họ thuộc tính, nhưng theo thứ tự để thực hiện việc này, DOM phải được tải. Với sự tối ưu hóa rất nhiều trình duyệt hiện nay rất khó để đảm bảo rằng các hình ảnh không được tải xuống.

Trên hết, chúng tôi chắc chắn muốn ngăn việc làm gián đoạn hình ảnh đã tải xuống, vì điều này chỉ đơn giản là lãng phí.

Vì vậy, tôi chọn sử dụng các giải pháp sau đây:

<img data-src="path/to/image.jpg" class="lazy"></img> 
<noscript> 
    <img src="path/to/image.jpg"></img> 
</noscript> 

Thông báo như thế nào những hình ảnh bên ngoài của thẻ noscript không có src nhưng một data-src thuộc tính để thay thế. Điều này có thể được sử dụng bởi một kịch bản tải xuống để tải từng hình một.

Chỉ khi javascript không có sẵn, sẽ những hình ảnh bên trong khối noscript được hiển thị, do đó không cần phải nạp .lazy hình ảnh (và không có cách nào để làm điều này, vì javascript không có sẵn).

Chúng tôi cần phải che giấu những hình ảnh mặc dù:

<noscript> 
    <style> 
     .lazy { 
      display: none; 
     } 
    </style> 
</noscript> 

Giống như img thẻ bên trong khối noscript, style khối này sẽ chỉ được hiển thị cho trình duyệt khi javascript không có sẵn.

Trên ghi chú có liên quan: Tôi nghĩ tôi có thể giảm kích thước html bằng cách không đặt thuộc tính src hoặc data-src trên hình ảnh lười biếng chút nào. Điều này sẽ tốt đẹp vì nó loại bỏ url dư thừa khỏi trang, tiết kiệm cho chúng tôi một số băng thông.

Tôi nghĩ tôi có thể lấy thuộc tính src ra khỏi khối noscript bằng cách sử dụng javascript anyways. Tuy nhiên, điều này là không thể: javascript không có quyền truy cập vào nội dung của khối noscript. Đề án trên là do đó hiệu quả nhất mà tôi có thể đưa ra.

Answer 2

Không chỉ định thuộc tính src là HTML không hợp lệ, điều không may là hầu hết các trình tải hình ảnh lười biếng hoạt động như thế nào.

Tôi đang làm việc trên một lazyloader sử dụng đánh dấu html hợp lệ, github liên kết: https://github.com/tvler/lazy-progressive-enhancement

Một hình ảnh lazyloaded sẽ được khai báo bằng cách gói nó trong một phần tử noscript:

<noscript><img alt="hello!" src="..."></noscript>

và html cuối cùng được xuất ra sẽ là

<img alt="hello!" src="...">.

Bạn có thể xem toàn bộ dự án trên github, trong đó đề với tải hàng loạt, sự kiện hooking & hơn, nhưng đây là chức năng cơ bản ở phạm vi của một hình ảnh noscript duy nhất:

var noscript = document.querySelector('noscript'), img; 
(img = document.createElement('div')).innerHTML = noscript.textContent; 
noscript.parentElement.replaceChild(img.firstChild, noscript);