trì hoãn việc tải một hình ảnh nền css nhất định

Question

trong một CSS như thế này:

... 
#big-menu { 
    background: #fff url(../images/big-menu.jpg) no-repeat; 
} 
#some-menu { 
    background: #fff url(../images/some-menu.jpg) no-repeat; 
} 
#some-other-menu { 
    background: #fff url(../images/some-other-menu.jpg) no-repeat; 
} 
... 

là có một cách để trì hoãn việc tải hình nền #big-menu 's, để nó tải sau khi mọi thứ khác, bao gồm tất cả các hình ảnh trong HTML và mọi nền CSS khác (số some-menu và some-other-menu).

Lý do là, big-menu.jpg có kích thước rất lớn và tôi muốn nó được tải cuối cùng. Sau khi tất cả, nó chỉ phục vụ như một mắt kẹo, và có những hình nền khác có sử dụng tốt hơn thế. (chẳng hạn như các nút được sử dụng trong các nút)

Thứ tự đặt nó trong CSS hoặc sự xuất hiện của đánh dấu (#big-menu) trong HTML có liên quan gì đến những gì được tải trước không? hoặc là có một cách đáng tin cậy hơn để kiểm soát nó? javascript (jQuery ưa thích) là tốt.

Answer 1

Thứ tự trong css không kiểm soát tài nguyên nào được tải trước, nhưng ảnh hưởng đến kiểu hiện có đang bị ghi đè hoặc kế thừa.

Thử sự kiện tải xuống JavaScript. Sự kiện chỉ thực hiện sau khi trang tải xong.

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG(); 

Answer 2

Kiểm soát khi tải hình ảnh trong CSS là không thực sự có thể. Bạn có thể thử đặt nó ở dưới cùng của StyleSheet nhưng tôi nghi ngờ bạn sẽ thấy một sự cải tiến.

Answer 3

Tôi không nghĩ rằng vị trí trong bảng tính sẽ ảnh hưởng đến nó, vì thứ tự của các yếu tố mà chúng được áp dụng sẽ quyết định hình ảnh nào sẽ được tải trước.

Bạn có thể sử dụng jQuery để tải những hình ảnh theo thứ tự đúng, mặc dù

$('firstElement').addClass('some-menu'); 
$('secondElement').addClass('some-other-menu'); 
$('lastElement').addClass('big-menu'); 

EDIT: Được rồi, vậy thì có lẽ thay vì thêm một lớp, một giải pháp tốt hơn sẽ có thêm nền trong thời gian chạy.

$('firstElement').css("background-image", "some-menu.jpg"); 
$('secondElement').css("background-image", "some-other-menu.jpg"); 
$('lastElement').css("background-image", "big-menu.jpg"); 

Answer 4

Điều này có thể không phải là một giải pháp hoàn hảo (vì nó là một css-nền và không phải là một hình ảnh), nhưng YUI Image loader cung cấp một cách tốt để lười biếng-tải hình ảnh.

Tạo một nhóm

var imgGroup = new YAHOO.util.ImageLoader.group(window, 'load', 2); 

Sau khi tài liệu đã được nạp, hình ảnh sẽ được tải 2 giây sau nó. Xem Yahoo! Shine hoặc examples để giới thiệu.

Answer 5

Một giải pháp khác là chia nhỏ nội dung của bạn trên các tên miền khác nhau, trình duyệt sẽ chỉ yêu cầu hai nội dung vào thời gian sau đó đợi một nội dung được tải trước khi bắt đầu tiếp theo. Bạn có thể quan sát điều này với Firebug và YSlow, do đó, đặt một số nội dung trên images.example.com và images1.example.com và xem điều đó có tác động không

Answer 6

Thứ tự tải xuống không thể kiểm soát được bằng css. Tuy nhiên bạn có thể sử dụng javascript để đạt được điều này.

Mặc dù không liên quan trực tiếp đến câu hỏi có thể trước khi thực hiện điều đó, bạn nên chọn hình ảnh bằng cách sử dụng smush.nó hoặc chương trình hình ảnh yêu thích của bạn tôi thấy rằng jpegs trông rất tốt khi được lưu ở chất lượng 85%. Thử nghiệm và đừng quên thiết lập máy chủ web của bạn để lưu trữ hình ảnh trong thời gian dài và sau đó vấn đề sẽ chỉ là lần đầu tiên người dùng của bạn truy cập trang web.

Answer 7

Bí quyết Javascript của Jason đã giúp tôi giải quyết vấn đề này. Tuy nhiên, tôi phải sửa lại cú pháp một chút:

function loadBG(){ 
    document.getElementById("big-menu").style.backgroundImage="url(../images/big-menu.jpg)"; 
} 
window.onload=loadBG();