Javascript/jquery頁面首先加載特定圖片

我有一個複雜的側滾動頁面我正在與構成背景的定位div的幾層工作。Javascript/jquery頁面首先加載特定圖片

頁面上還有很多圖片會減慢加載時間。

我需要的背景層（與CSS背景圖像的div）（即第一前丘陵，再回到丘陵，然後天空，然後狗）的優先次序以特定的順序來加載。

我已經使用這個jQuery的負載嘗試，但其他項目加載頁面上仍與此干擾。我試着隱藏它們並在準備好的文檔中首先顯示它們，並將它們放在我的HTML文檔的頂部。我認爲有一些方法可以用來加載事件，但我不確定如何從頁面加載的其餘部分優先處理它。

我試圖找出是否有一種方法基本上暫停所有負載，負載我4個圖像順序，然後繼續頁面加載。

感謝您的任何建議或意見！我會批准第一個提交的答案，這個答案是有效的！我知道還有其他類似的門票，但我整個週末一直在努力，嘗試了其中的幾個，但似乎無法找到與我需要的完全相同的東西。

謝謝:) - 安

來源

2012-09-24 AE Grey

用'Z-index'（ css）或'zIndex'（Javascript）並手動設置該圖像的「圖層」。這樣，加載順序就不重要了。 –

我已經得到了CSS的地方。圖像加載在彼此的頂部，問題是第一個背景圖像（一塊大的天空塊）首先加載時，我需要它加載最後。我有一個非常小的身體背景，模仿20k文件中的背景圖層，但圖層是100k + - 這就是爲什麼我不想用天空片覆蓋背景，直到具有更高z值的山層，索引負載第一。 –

我想你會需要一個相當結構化的方法。

有跡象表明，決定圖像需要多長時間來加載，並會盡快它已經準備好展示的因素負荷。您可以保留一些隱藏的內容，直到您準備好向他們展示爲止，但是您仍然一次又一次地加載大量圖像，這是緩慢而痛苦的。

你已經清楚地得到了在一個特定的順序一個「創意」的原因裝載（背景先，等） - 這樣擁抱......你幾乎可以通過拿出一個時間表編排的負荷。

然後從初始頁面加載中除去第一個「波形」圖像。由於這些是CSS background-image屬性，這意味着從樣式表中刪除它們。

然後，您可以使用jQuery設置它們background-image樣式屬性加載每個後續圖像集：

$('.foreground').css('background-image', 'url(<path>)');

要創建一個「序」，你會希望每個組圖像，以便啓動時加載上一組已完成加載 - 檢測時的背景圖片加載完成討論HERE - 但模式可能是這個樣子：

var loadNextImageSet = function() { 
    var imageSet = listOfImageSets.pop(); 
    loadImages(imageSet); 
}; 

$(document).on('images-loaded', function() { 
    loadNextImageSet(); 
}); 

loadNextImageSet();

其中loadImages()啓動圖像L異步掛載並在完成時觸發自定義的images-loaded事件。

如果您仍然希望自己的網頁仍能正常（雖然不是那麼順利）沒有JavaScript加載，你可能想嘗試2種樣式 - 一個與所有的圖像（非JS用戶）和一個只第一波（JS用戶）。然後，您可以確保正確的拾取像這樣：

<html> 
<head> 
    ... 
    <noscript> 
     <link rel="stylesheet" href="full.css"> 
    </noscript> 
</head> 
<body> 
    <script> 
     var link = document.createElement('link'); 
     link.rel = 'stylesheet'; 
     link.href = 'background-only.css'; 
     document.head.appendChild(link); 
    </script> 
... 
</body> 
</html>

不使用JavaScript的最乾淨的方式，但<script>元素必須是早在儘量避免無樣式的內容的閃光。

來源

2012-09-24 00:53:12

Thanks Stu！我很確定這樣的事情是我必須這樣做的。這將會比我希望的更多的工作，因爲這個頁面有940832049823圖片。我爲一家廣告公司工作 - 所以這是一個非常有創意的網站，涉及很多 - 這是一個關於HTML5類固醇的Flash網站。他們否認了一個「加載」圖形，所以我想弄清楚如何讓所有的東西看起來都有點體面:) –

如果你有大量的圖像，並且它們有很多小圖像，你有沒有想過使用精靈表？需要更多的工作才能使其運行良好，但由於您不會爲大量小圖片造成HTTP請求開銷，因此可以大幅減少加載時間。 – Aatch

@Aatch提供了很好的建議。事實上，如果您想要加載每個「圖層」的精靈圖表，那麼您只需加載每個圖層1個圖像，這與快速圖像可以很好地分隔爲背景，中景，前景等。實際上，它可能會變得足夠快，以至於您有意添加*輕微*延遲來提供分層效果 - 對於每層可能只是200ms淡入。 –

我所知道的最簡單的方法是在你的顯示器希望以便安排您的圖片：無頁面的身體最頂級的風格股利。

來源

2012-09-24 00:12:50 SaidbakR

是的，也嘗試過，似乎沒有太好。 –

現代瀏覽器非常聰明，所以沒有太多的事情可以停止加載各種文件。

也許唯一真正的解決方法是從JavaScript加載幾乎所有東西。

而不是把所有東西放在你的HTML中，把所有東西放在你的Javascript中。如果你在HTML中有背景圖像，那麼它們將首先被加載，然後你的JavaScript可以完成剩下的工作。

如果你想避免過多的工作，然後又做了排序預加載頁面的背景和其他的東西，然後一切都加載通過AJAX其他是一個簡單的方法。只需要有一個空的塊元素並通過AJAX從服務器請求頁面內容。

來源

2012-09-24 00:34:19 Aatch

是的，這可能是我正在看的 - 通過JS加載所有內容。不幸的是我不能做阿賈克斯。 –

爲什麼你不能做AJAX？它在所有瀏覽器中都是標準的，甚至是IE6。任何可能不會支持你正在使用的東西的東西。 – Aatch

這是我工作的一個特定的aspx框架 - 它使用ssi xslt作爲內容。由於某種原因，ajax不起作用。這是一個截止到明天的截止日期，所以我沒有時間弄清楚：/ –

在我看來，首先加載背景圖像的直接方式是將背景圖像放在文檔的前面，所以當瀏覽器加載頁面時，圖像開始播放。但我知道也許有圖像的div可能不在前面。我可以使用父div的background-image屬性。並使用背景位置來控制位置，還可以在父顏色上使用帶有背景顏色的空白div層來覆蓋不希望看到背景顏色的空間;所以你可以加載背景iamge firest。順便說一句，如果你有很多背景圖片加載，這意味着你會多次請求服務器，這將是延遲。所以你可以將所有的背景圖像合併成一個圖像，並使用「CSS Sprites」的方法在你想要的地方使用它，我認爲它可以加快你的加載速度。

來源

2012-09-24 00:56:30 user1693166

是的，我試過了。我認爲這會更復雜一些。 –

不知道它是否適合您，但是，您是否想過將所有頁面加載，並且比使用JQuery以正確的順序顯示所需內容？你可以在頁面加載的一些部分的所有圖像之前，可能連一些簡單的版本，在同一頁的更輕的圖像或沒有圖像，但與背景漸變左右...

來源

2012-09-24 01:21:07 Felix

Javascript/jquery頁面首先加載特定圖片

回答

相關問題