Backbone.js，Underscore.js：模板圖像預加載

我目前正在用JQuery，RequireJS和Underscore完成一個巨大的Backbone.js應用程序。Backbone.js，Underscore.js：模板圖像預加載

我的下劃線模板中有很多圖片（大量的.png），並且append（）||有點長。在我當前的視圖中prepend（）這些模板。

所以有一個很好的方法來做我的工作？我正在尋找一個庫或一個例子來在我的模板上進行預加載。

2012-01-20 Awea

這是從[這些問題]顯着不同（http://stackoverflow.com/search?q=jquery+preload+images）？例如，您是否在尋找一種方法來自動提取圖像列表以預裝出您的模板代碼？ – nrabinowitz

是的，我正在找你說什麼，我發現這個http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/但如果我使用這樣的東西，我怎麼能做到這一點與backbone/requireJs/Underscore？我需要調整這個庫來處理require.js的問題嗎？ – Awea

我不認爲你一定需要這個庫，除非有一個專門用於模板。如圖these related questions詳細描述的，預加載的圖像是比較簡單的：

$("<img />").attr("src", url);

將在url預載圖像。這是很明顯，你可以（在這裏使用$.each爲簡潔的語法）輕鬆地應用此數組：

function preload(urls) { 
    $.each(urls, function(i, url) { 
     $("<img />").attr("src", url); 
    }); 
} 
preload(['/images/1.png', '/images/2.png', ... ]);

你並不需要爲這個圖書館。在你的情況下，困難的部分是生成預加載的URL列表。這是不可能知道這裏的最好的辦法不理解你的模板系統更好，但這裏有幾個方法：

如果您有可用的DOM對象在內存中，然後就可以通過他們循環使用像你的模板$('img').map(function() { return $(this).attr('href') })找到網址。但是，如果您在<script>標記中使用下劃線模板，並且在渲染視圖之前不將它們製作成DOM對象，那麼這不太可能奏效 - 這將會是一個痛苦，並且需要大量處理器來渲染它們數據僅用於提取網址。
如果您使用像Ant這樣的構建系統，並且您的模板與其他代碼（例如，單獨文件中的每個模板）相當獨立，那麼您可以考慮使用正則表達式來解析URL的模板，將它們轉換爲Javascript文件中的數組，您可以將其用於輸入到您的預加載器。這是一個相當複雜的構建任務，但從性能的角度來看，這可能是最好的選擇，因爲所有模板解析都是在構建時發生的，而不是在運行時發生。
另一種構建系統的方法可能更簡單一些，就是將要預先加載的所有圖像放到一個給定的目錄中，然後將該目錄下的每個文件放到Javascript數組中。這可能是Ant最簡單的方法，但它可能需要您修改圖像的目錄結構。
您可以隨時手動製作您的網址數組，但使用複雜的模板集保持最新狀態會很困難。
如果您有一個複雜的應用程序，並且您只想在任何給定時間預加載某些圖像，則可能需要手動識別這些圖像，然後在適當的時間調用preload(upcomingImages)以獲得適當的圖像集。

來源

2012-01-20 23:08:47 nrabinowitz

感謝您的優秀回答，我更喜歡不使用庫（因爲我需要使它與requireJS一起工作）。我想我要通過使用它們的數組來預先加載img，以將它們追加到我的視圖中或類似的東西:) – Awea

你知道我發現這個驚人的，這個相同的代碼也可以預加載用於div的背景圖像。儘管看起來像我們正在將圖像預加載到標籤中，但它似乎預加載圖像，並使其在站點中引用相同src的任何位置都可用。因此，您可以使用此預先加載網站上使用的任何圖像，而不僅僅是標籤中的圖像。 – nearpoint

如果您需要更精細的控制，您可以使用DOM的Image對象。像：

var img = new Image(); 

img.src = 'image.png'; 

img.load = function() { 
    console.log('image.png is fully loaded'); 
}

您將需要隊列圖像網址和至少一個回調。

一個簡單的工人看起來像：

function worker (url, callback) { 
    var img = new Image(); 
    img.src = url; 
    img.load = callback; 
}

來源

2012-01-21 16:09:00 LoG

Backbone.js，Underscore.js：模板圖像預加載

回答

相關問題