tải trước hình ảnh CSS ẩn

Question

Tôi đang làm việc trên trang chủ dựa trên jquery với 5 hoặc nhiều div bị ẩn, mỗi div chứa một số hình nền css.

Vấn đề là trình duyệt không tải hình ảnh css vào DOM cho đến khi khả năng hiển thị của lớp cha được hiển thị, khiến cho hình ảnh tải chậm khi lớp hiển thị.

Solutions Tôi đã xem xét:

• CSS sprites (quá nhiều việc phải thiết kế lại cho điều này, và sẽ không thực sự làm việc khi hiển thị/div ẩn)
• This jQuery plugin rằng hình ảnh nền tự động tải CSS (chỉ đơn giản là không làm việc cho tôi như báo cáo của nhiều người khác).

• gia tải những hình ảnh thông qua js:

  $(function() { 
  function preloadImg(image) { 
      var img = new Image(); 
      img.src = image; 
  } 
  
  preloadImg('/images/home/search_bg_selected.png'); 
  }); 
  

  Giải pháp này dường như tải hình ảnh vào dom hai lần ... một lần khi js tải nó, và sau đó một lần nữa khi lớp div mà tải nó trở nên rõ ràng ... vì vậy nó làm cho 2 cuộc gọi HTTP, do đó không hoạt động.

Bất kỳ giải pháp nào khác cho vấn đề này mà tôi đang thiếu?

Answer 1

Khi bạn nói những cách khác bạn có nghĩa là những người không sử dụng Javascript?

<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> 

none cách JS khác là để đặt một số html trong trang của bạn ở đâu đó vì vậy nó không nhìn thấy:

<image src="picture.jpg" width="1" height="1" border="0"> 

hoặc HTML ...

<img src="images/arrow-down.png" class="hiddenPic" /> 

... và CSS. ..

.hiddenPic { 
    height:1px; 
    width:1px; 
} 

Nhiều phương pháp JavaScript:

function preload(images) { 
    if (document.images) { 
     var i = 0; 
     var imageArray = new Array(); 
     imageArray = images.split(','); 
     var imageObj = new Image(); 
     for(i=0; i<=imageArray.length-1; i++) { 
      //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images) 
      imageObj.src=images[i]; 
     } 
    } 
} 

Sau đó tải những hình ảnh sử dụng một cái gì đó như:

<script type="text/javascript"> 
preload('image1.jpg,image2.jpg,image3.jpg'); 
</script> 

Answer 2

"Giải pháp này dường như tải hình ảnh vào dom hai lần ... một lần khi js tải nó, và sau đó một lần nữa khi div lớp tải nó trở thành có thể nhìn thấy ... do đó, nó làm cho 2 cuộc gọi http, do đó không hoạt động "

Yêu cầu thứ hai http phải trả lời trong 304 (không được sửa đổi), vì vậy tôi đoán điều đó là ổn? tùy chọn khác là để tải hình ảnh qua jQuery và sau đó chèn như inline hình nền thông qua DOM, như:

jQuery.fn.insertPreload = function(src) { 
    return this.each(function() { 
     var $this = $(this); 
     $(new Image()).load(function(e) { 
      $this.css('backgroundImage','url('+src+')'); 
     }).attr('src',src); 
    }); 
}; 

$('div').insertPreload('[huge image source]'); 

Answer 3

URL mã hóa cứng như các giải pháp khác cho thấy nơi một loại thuế về bảo trì mã. Nó tương đối dễ dàng để tránh điều này và làm cho một giải pháp chung với jQuery.

Chức năng này chọn tất cả các thành phần bị ẩn, kiểm tra xem chúng có hình nền hay không và sau đó tải chúng vào phần tử giả ẩn.

$(':hidden').each(function() { 
    //checks for background-image tab 
    var backgroundImage = $(this).css("background-image"); 
    if (backgroundImage != 'none') { 
    var imgUrl = backgroundImage.replace(/"/g,"").replace(/url\(|\)$/ig, ""); 
    $('<img/>')[0].src = imgUrl; 
    } 
}); 

Answer 4

Tải trước CSS dễ dàng.

Ví dụ:

body:after{ 
    display:none; 
    content: url(img01.png) url(img02.png) url(img03.png) url(img04.png) 
} 

Answer 5

trình duyệt đang bắt đầu để hỗ trợ prefetch và preload thuộc tính của tài sản rel="..." các <link> phần tử.

Addy Osmani của post about the preload and prefetch properties là tuyệt vời và mô tả khi họ nên được sử dụng:

Preload là một đầu lấy hướng dẫn cho trình duyệt để yêu cầu một nguồn tài nguyên cần thiết cho một trang (kịch bản quan trọng, Web Fonts, hình ảnh anh hùng).

Tìm nạp trước phục vụ trường hợp sử dụng hơi khác - điều hướng trong tương lai của người dùng (ví dụ: giữa lượt xem hoặc trang) nơi tài nguyên được tìm nạp và yêu cầu cần phải duy trì trên các điều hướng. Nếu Trang A bắt đầu yêu cầu tìm nạp trước các tài nguyên quan trọng cần thiết cho Trang B, thì các yêu cầu tài nguyên và điều hướng quan trọng có thể được hoàn thành trong song song. Nếu chúng tôi sử dụng tính năng tải trước cho trường hợp sử dụng này, nó sẽ là ngay lập tức bị hủy khi tải xuống của Trang A.

Yếu tố được sử dụng như sau:

<link rel="preload" as="image" href="https://your.url.com/yourimage.jpg" /> 

Tôi đang thiết kế một mẫu với nhiều bước, và mỗi người đều có một hình nền khác nhau. Mẫu này giải quyết "chớp mắt" giữa các bước khi Chrome tải xuống hình nền tiếp theo.