預加載隱藏的CSS圖像

Question

我正在開發一個基於jquery的主頁，其中包含5個左右的隱藏div，每個div包含幾個背景css圖像。

問題是瀏覽器不會將css圖像加載到DOM中，直到顯示父圖層的可見性，導致圖像在圖層變得可見時緩慢加載。

我已經考慮過的解決方案：

• CSS sprites（為此重新設計太多工作，並且在顯示/隱藏div時不會真正起作用）
• 這個jQuery插件自動加載CSS背景圖像（根據許多其他人的報告，對我來說根本不起作用）。

• 通過js預加載圖像：

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

  這個解決方案似乎將圖像加載到dom中兩次......一旦js加載它，然后再次加載它的div層變得可見...所以它進行2次HTTP調用，因此不起作用。

我缺少這個問題的任何其他解決方案？

Answer 1

當你說其他方式你的意思是那些不使用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>

其他沒有JS的方法是在你的頁面中放置一些html，所以它沒有被看到：

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

或HTML ...

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

......和CSS ......

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

更多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];
        }
    }
}

然后使用以下內容加載圖像：

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

Answer 2

CSS預加載很容易。

示例 ：

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

Answer 3

像其他解決方案一樣的硬編碼URL建議對代碼維護征稅。 避免這種情況並使用jQuery制作通用解決方案相對容易。

此函數選擇所有隱藏元素，檢查它們是否具有背景圖像，然后將它們加載到隱藏的虛擬元素中。

$(':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

“這個解決方案似乎將圖像加載到dom中兩次......一旦js加載它，然后再加載它的div層變得可見......所以它會產生2個http調用，因此無法工作”

第二個http請求應該在304（未修改）中響應，所以我猜這沒關系？ 另一個選擇是通過jQuery加載圖像，然后通過DOM插入內嵌作為背景圖像，如：

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 5

瀏覽器開始支持<link>元素的rel="..."屬性的prefetch和preload屬性。

Addy Osmani 關於預加載和預取屬性的帖子非常出色，並描述了何時應該使用它們：

預加載是瀏覽器的早期提取指令，用於請求頁面所需的資源（關鍵腳本，Web字體，英雄圖像）。

預取提供稍微不同的用例 - 用戶將來的導航（例如，在視圖或頁面之間），其中獲取的資源和請求需要跨導航持久存在。 如果頁面A發起對頁面B所需的關鍵資源的預取請求，則可以並行完成關鍵資源和導航請求。 如果我們對此用例使用了預加載，則會在Page A的卸載時立即取消。

該元素的使用方式如下：

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

我正在設計一個包含多個步驟的表單，每個表單都有不同的背景圖像。 當Chrome下載下一張背景圖片時，此模式可解決步驟之間的“閃爍”問題。