Dừng tải hình ảnh khi đang ở trên điện thoại thông minh

Question

Tôi đang phát triển trang web đáp ứng cho công ty có trang web kích thước đầy đủ có trình chiếu với hình ảnh trong nền (lấp đầy hoàn toàn màn hình bằng Backstretch). Vì hình ảnh có kích thước khá lớn (khoảng 300k), tôi đang tìm cách ngăn hình ảnh không được tải khi xem trang web trên điện thoại thông minh.

Tôi đã áp dụng display: none và visibility: hidden trên div backstretch với truy vấn phương tiện. Nó ẩn hình ảnh, nhưng có vẻ như chúng vẫn đang được tải xuống. Có cách nào thông minh để làm cho trình duyệt bỏ qua chúng hoàn toàn không?

Answer 1

Nếu bạn đang đặt hình ảnh qua CSS thì có một cách.

Nếu bạn đặt div để hiển thị: none nó vẫn sẽ tải về, tuy nhiên nếu bạn thiết lập các div cha để hiển thị không có thì nó sẽ không tải cho đến khi một đám cháy truy vấn phương tiện để đặt

CSS

.parent {display:block;} 
.background {background-image:url(myimage.png);} 

@media only screen and (max-width:480px) { 
.parent {display:none;} 
} 

HTML

<div class="parent"> 
    <div class="background"></div> 
</div> 

Hat tip để Tim Kadlec - http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Answer 2

visibility và display không liên quan gì đến việc tải xuống hình ảnh hay không. Điều duy nhất bạn có thể làm là có tất cả hình ảnh làm hình nền và sử dụng truy vấn phương tiện để loại trừ chúng hoàn toàn trong biểu định kiểu thay thế của bạn.

Answer 3

Tùy chọn khác là đi theo phương pháp đầu tiên trên thiết bị di động, xác định kiểu mặc định cho thiết bị di động và ghi đè các kiểu này trong truy vấn phương tiện cho chiều rộng màn hình lớn hơn.

giống như sau sẽ ngăn chặn các hình ảnh được tải xuống trên một thiết bị di động, và cũng tránh sự cần thiết cho một div wrapper không cần thiết :)

HTML:

<div class="container"> 
    <!-- slideshow container --> 
</div> 

CSS:

/* default to no background image */ 
.container { 
    background-image: none; 
} 

/* add it in for wider screens */ 
@media screen and (min-width: 500px) { 
    .container { 
     background-image: url(myimage.png); 
    } 
}