Chậm trễ khi tải hình nền CSS

Question

Tôi có một số tab cho trang web của mình nơi thay đổi hình nền khi bạn nhấp vào chúng.

Tuy nhiên khi tôi di chuột qua các tab lần đầu tiên sau khi DOM được tải, có một chút chậm trễ trước khi hiển thị hình ảnh di chuột, dẫn đến hiệu ứng chói tai.

Tôi không biết cách khắc phục sự cố này, bất kỳ ý tưởng nào? :)

Ví dụ trực tiếp tại đây: http://jsfiddle.net/timkl/fjupq/ - sự chậm trễ không dài trên máy chủ của JSFiddle - nhưng nó vẫn ở đó.

Answer 1

Giải pháp cho việc này là sử dụng sprites thay vì hình ảnh riêng biệt.

• http://css-tricks.com/css-sprites/

Bạn sử dụng một hình ảnh duy nhất, và thay vì thay đổi nguồn cơ bản về :hover, bạn chỉ cần thay đổi vị trí nền. Bằng cách này, toàn bộ hình ảnh được tải trước.

Ví dụ, hãy kiểm tra tờ ma Stack Overflow của:

• http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=4

Bạn không cần phải mang nó đến cùng cực này, bạn chỉ có thể có một hình ảnh mà có cả bình thường và các trạng thái :hover và di chuyển sang trái/phải hoặc lên/xuống.

Answer 2

Một giải pháp đơn giản là sử dụng javascript để tải trước hình ảnh. Bao gồm điều này ở phần đầu của trang:

<script type="text/javascript"> 
    var img = new Image(); 
    img.src = "http://dummyimage.com/200x10/000000/fff"; // background image 
</script>