Tôi là người mới bắt đầu làm front-end đang cân nhắc những điều sau:

Một trang HTML nhất định phải chứa một hình ảnh nặng (ví dụ: gif động), nhưng tôi không muốn buộc khách hàng phải đợi nó tải xuống từ từ để thưởng thức một trang đẹp, thay vào đó tôi thà cho anh ta xem một hình ảnh nhẹ ( ví dụ: gif động) gif), thay thế hình ảnh nhẹ bằng hình ảnh nặng khi trình duyệt máy khách có thể dễ dàng tải xuống hình ảnh cũ.

Cách tiếp cận tốt nhất để giải quyết vấn đề này là gì - tôi đang tìm kiếm giải pháp kỹ thuật hay phương pháp luận?

Cảm ơn!

câu trả lời hay nhất

Bạn có thể nhúng hình ảnh nhẹ bằng URL dữ liệu. Điều này sẽ hiển thị hình ảnh ngay lập tức.

Bạn có thể sử dụng trang web nàyChuyển đổi tập tin hình ảnh thành URL dữ liệu.

Sau đó, những gì bạn cần làm là tải hình ảnh lớn hơn ở chế độ nền và thay thế nó bằng hình ảnh nhẹ sau khi tải.

CSS sau đây ban đầu ẩn hình ảnh nặng:

/* Không hiển thị hình ảnh nặng cho đến khi chúng được tải */
img.heavy {
   display: none;
}

Javascript dựa trên jQuery sau đây sẽ ẩn hình ảnh nhẹ và hiển thị hình ảnh nặng sau khi tải:

$(function () {
    // Đăng ký trình xử lý sẽ được gọi khi tải hình ảnh nặng
    $("img.heavy").on("load", function () {
        // Ẩn hình ảnh nhẹ 
        // (chúng ta giả sử rằng nó là anh em 'img' ngay trước đó của 
        //hình ảnh nặng)
        $(this).prev("img").hide();

        // Hiển thị hình ảnh nặng
        $(this).show();
    });
});

Cập nhật (không sử dụng URL dữ liệu)

Nếu bạn không muốn sử dụng URL dữ liệu cho hình ảnh nhẹ, bạn có thể sử dụng cách tiếp cận tương tự và không bắt đầu tải hình ảnh nặng cho đến khi tải được hình ảnh nhẹ.

Hình ảnh nặng ban đầu không tải được vì nó không src tài sản.

Đoạn script sau sẽ bắt đầu tải hình ảnh nặng ngay khi hình ảnh nhẹ được tải (bằng cách thêm dữ liệu-src Sao chép vào src), và cuối cùng là "thay thế" ảnh nhẹ sau khi tải ảnh nặng.

$(function () {
    // Đăng ký trình xử lý sẽ được gọi khi tải hình ảnh có dung lượng nhẹ
    $("img.light").on("load", function () {
        // Bắt đầu tải hình ảnh nặng (bằng cách gán thuộc tính src)
        $(this).next("img.heavy").each(function () {
            $(this).attr("src", $(this).attr("data-src"));
        }).on("tải", function () {
            // Hiện ảnh nặng và ẩn ảnh nhẹ 
            $(this).show().prev("img.light").hide();
        });
    });
});

Cập nhật 2 (tự động tạo các yếu tố hình ảnh nặng)

Nếu bạn có thể lấy được một URL nặng từ một URL nhẹ thì bạn có thể sử dụng một phương pháp khác có thể dễ sử dụng và bảo trì hơn.

Đoạn script sau sẽ tạo một phần tử hình ảnh nặng mới cho mỗi hình ảnh nhẹ được tải. URL hình ảnh nặng được sao chép từ URL hình ảnh nhẹ, nhưng văn bản ánh sáng Thay thế bằng nặng.

$(function () {
    // Đăng ký trình xử lý sẽ được gọi khi tải hình ảnh có dung lượng nhẹ
    $("img.light").on("load", function () {
        // Tạo phần tử ảnh nặng sau ảnh nhẹ
        // URL được tính từ hình ảnh có trọng lượng nhẹ (bằng cách thay thế 'nhẹ' bằng 'nặng')
        // Phần tử ban đầu bị ẩn.
        $("")
            .attr("src", $(this).attr("src").replace("light", "heavy"))
            .hide()
            .on("tải", hàm () {
                // Hiển thị ảnh nặng và xóa ảnh nhẹ 
                $(this).show().prev("img.light").remove();
            })
            .insertAfter(cái này);
    });
});

Phiên bản này cũng loại bỏ các hình ảnh nhẹ khỏi DOM sau khi tải các hình ảnh nặng.

Về javascript - trên trang web - làm cách nào để hiển thị hình ảnh (nhẹ) và thay thế nó bằng hình ảnh (nặng) khi khách hàng tải xuống hình ảnh sau? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/17260728/