Phần tử có hiển thị: không có bộ nào trong css vẫn được trình duyệt tải xuống không?

Question

Trình duyệt vẫn tải xuống hình ảnh?

<img src="/myimage.jpg" style="display:none;" /> 

Answer 1

Vâng, ít nhất là theo giao diện điều khiển thuần trong Firebug.

Như đã nêu trong thimimble, CSS là lớp trình bày và ảnh hưởng đến hiển thị, không phải là quá trình xử lý thực tế của trang.

Nó sẽ không nằm ngoài phạm vi khả năng của một số trình duyệt, đặc biệt là thiết bị di động, để có khả năng không tải xuống điều này nhằm cố gắng tối ưu hóa hiệu suất.

Answer 2

Có. Hiển thị hình ảnh không liên quan gì đến việc tải xuống hình ảnh.

Chỉnh sửa:
Thử sử dụng Chrome hoặc Firefox để thực hiện kiểm tra thời gian tài nguyên của trang. Lưu ý rằng tất cả hình ảnh được tải xuống. Ngay cả những người có kiểu hiển thị được đặt thành không.

Answer 3

Có.

Tuy nhiên, như một sidenote, một số trình duyệt sẽ không tải hình ảnh với width và height thuộc tính của 0. Không thể tìm được nguồn bây giờ, và chỉ được thử nghiệm Firefox và Safari và họ làm tải về nó. Phải là IE, bất cứ ai có thể thử nghiệm cho tôi không? Cảm ơn.

Khi nghi ngờ, sniff dòng, hoặc sử dụng một công cụ trình duyệt cụ thể (Firebug cho Firefox, Web Inspector cho Webkit, vv)

Answer 4

Quirks Mode: images and display: none

Khi hình ảnh có display: none hoặc là bên trong một phần tử với display:none, trình duyệt có thể lựa chọn không tải hình ảnh cho đến khi display được thiết lập để giá trị khác.

Chỉ Opera tải xuống hình ảnh khi bạn chuyển đổi display thành block. Tất cả các trình duyệt khác đều tải xuống ngay lập tức.