JavaScript加載背景圖像異步

我見過很多jQuery插件以異步的方式加載正常的圖像，但我不能找到是否有可能預加載/異步加載背景圖像。

編輯

我澄清我的問題。我一直在這個測試網站上工作http://mentalfaps.com/ 背景圖像是從一組圖像隨機加載的，每個小時由一個chron作業刷新（在flickr目錄中隨機獲取圖像）。

此時主機空閒且速度較慢，所以背景圖片需要一些時間才能加載。

第一個疊加層（具有PNG透明mentalfaps徽標的那個）和寬度的定位由在jQuery(document).ready構造中創建的函數來調節。

如果您嘗試刷新頁面多少次，右覆蓋div的寬度爲0（所以你看到一個「洞」的佈局）

這裏是設置我的位置的方法：

function setPositions(){ 
    var oH = $('#overlay-header'); 
    var overlayHeaderOffset = oH.offset(); 
    var overlayRightWidth = $(window).width() - (overlayHeaderOffset.left + oH.width()); 
    if (overlayRightWidth >= 0) { 
     $('#overlay-right').width(overlayRightWidth); 
    } else { 
     $('#overlay-right').width(0); 
    } 
    var lW = $('#loader-wrapper'); 
    lW.offset({ 
     left: (overlayHeaderOffset.left + oH.width() - lW.width()) 
    }); 
}

問題是$(window).width()低於有效窗口寬度！所以檢查失敗和腳本去$('#overlay-right').width(0);

任何想法？

來源

2011-06-01 VAShhh

一旦圖像被緩存，所有來自瀏覽器的圖像調用，不管元素如何，都會調用緩存版本，直到緩存過期。 – zzzzBov 2011-06-01 19:15:47

我很確定所有圖像都是異步加載的。 – James 2011-06-01 19:16:16

我自己找到了答案，這是一個問題，因爲.offset()方法有時會給出錯誤的值。

我不得不使用.position()寫值：

var overlayHeaderOffset = oH.position();

來源

2011-06-08 17:41:54 VAShhh

不確定我是否真的理解你的問題，但背景圖像（和所有其他圖像）已經異步加載 - 瀏覽器將在解析HTML時遇到URL時立即啓動對它們的單獨請求。

見背景這個優秀的答案上加載順序：Load and execution sequence of a web page?

如果你的意思是別的東西，請澄清。

來源

2011-06-01 19:14:36

在後臺加載內容的訣竅是加載一次，所以下次加載時它已經在緩存中。

把下面的HTML的結尾：

<script> 
    var img = new Image(); 
    img.onload = function() { 
     document.getElementsByTagName('body')[0].style.backgroundImage = 'background.png'; 
    }; 
    img.src = 'background.png'; 
</script>

來源

2011-06-01 19:20:08

你可以在頭使用的預取的鏈接。

<link rel="prefetch" href="/images/background.jpg">

您應該可以通過JavaScript將這些鏈接添加到頭部。

來源

2011-06-01 19:20:55 btford

如前所述，背景圖像是異步加載的。如果你需要從JQuery代碼中加載背景圖片，你也可以設置addClass（）方法來設置CSS類或者attr（「style = \」background-image：url（'myimage.png'）\「」）

來源

2011-06-01 19:23:06 Yuri

我喜歡使用CSS填充頁面加載顏色的背景。

DOM ready事件後，我使用jQuery來修改CSS並添加背景圖片。這樣，圖像在加載頁面之後才加載。不確定異步，但這種方法給用戶一個體面的體驗。

實施例：http://it.highpoint.edu/

右側導航鏈接具有一個背景圖像。該頁面以背景顏色初始化。它在頁面加載後通過jQuery替換爲背景圖片。

來源

2011-06-01 19:35:12 Teddy

的變化在這個文件jquery.ImageOverlay.js

設置你的高度和寬度，並享受這...

imageContainer.css({ 
      width : "299px", 
      height : "138px", 
      borderColor : hrefOpts.border_color 
     });

來源

2012-04-18 06:32:07 nikunj

這是非常有用的真實............ – nikunj 2012-04-18 06:33:31

JavaScript加載背景圖像異步

回答

相關問題