Làm thế nào để tải trước hình ảnh chỉ được sử dụng khi di chuột?

14

Tôi có một liên kết bắt đầu bằng một hình nền và sau đó thay đổi khi di chuột sang hình khác. Cả hai hình nền được đặt trong CSS. Các trình duyệt của tôi (bất kỳ trình duyệt nào) dường như không tải hình ảnh di chuột cho đến khi bạn thực sự di chuột. Nhưng sau đó, bạn kết thúc với một hình ảnh trống trong vài giây (trên kết nối rất chậm của tôi) để tải cái mới. Có cách nào để khuyến khích trình duyệt tải trước hình ảnh di chuột để thời gian trễ không xảy ra khi di chuột không?

css images load-time

— Daniel Bingham
nguồn

17

1) Sử dụng CSS Sprites (Đây là phương pháp ưa thích).

2) Tải hình ảnh trong một div ẩn. Đặt hình ảnh vào div và sau đó đặt CSS của div display: none;để ẩn nó.

3) Tải hình ảnh bằng CSS :

#preloadedImages
{
    width: 0px;
    height: 0px;
    display: inline;
    background-image: url(path/to/image1.png);
    background-image: url(path/to/image2.png);
    background-image: url(path/to/image3.png);
    background-image: url(path/to/image4.png);
    background-image: url();

}

4) Sử dụng JavaScript này

<script language="JavaScript">

function preloader() 
{
     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="image1.jpg"
     images[1]="image2.jpg"
     images[2]="image3.jpg"
     images[3]="image4.jpg"

     // start preloading
     for(i=0; i<=3; i++) 
     {
          imageObj.src=images[i];
     }
}
</script>

— John Conde
nguồn

Có cách nào để tải chúng sau khi trang được tải không? Vì vậy, người dùng không nhìn thấy một vòng tròn tải trên con trỏ? Một cách sẽ có một khung ẩn sử dụng javascript để trì hoãn khung ẩn được hiển thị, như trong câu hỏi stackoverflow.com/questions/13437091/ của tôi nhưng có một phương pháp ưa thích để trì hoãn và không hiển thị vòng tròn tải trên con trỏ đó ?

— riseagainst

Không bao giờ, tôi tìm thấy perishablepress.com/3-ways-preload-images-css-javascript-ajax này và nó hoạt động hoàn hảo với thời gian trễ.

— riseagainst

10

Tôi thực sự không thích giải pháp javascript - nó lộn xộn, khó bảo trì và tất nhiên thất bại hoàn toàn khi JS bị vô hiệu hóa.

Giải pháp hiện đại là sử dụng CSS Sprites - hãy thử nó, tin tôi đi, bạn sẽ tự hỏi tại sao bạn chưa bao giờ làm điều này trước đây;)

— dmp
nguồn

0

Tôi tìm thấy liên kết này về cách tải trước hình ảnh bằng CSS thuần túy:

http://www.thecssninja.com/css/even-better-image-preloading-with-css2

Và nó hoạt động với tôi khi tôi cần thay đổi các hình nền khác nhau khi di chuột.

— Sheena Katrina
nguồn

0

Thêm cái này phía trên CSS của bạn:

<script type="text/javascript">
var images = ['img1.jpg', 'img2.jpg'];

for(var i = 0, len = images.length; i < len; i++) {
  new Image().src = images[i];
}
</script>
<link rel="stylesheet" type="text/css" href="your_css_file.css" />

Nếu bạn đi theo đường sprite như danp cho thấy bạn vẫn gặp vấn đề với việc tải sprite trước khi cần. Điều đó nói rằng tôi yêu các sprite; để dễ dàng tạo ra chúng, tôi sử dụng công cụ spriteme từ Steve Souder:

— Tiếng Anh
nguồn