針對瀏覽器遊戲框架的硬編碼圖像大小vs動態圖像大小設置？

我想知道什麼是利弊以及具有框架，其中（a）您設置圖像這樣的優點：針對瀏覽器遊戲框架的硬編碼圖像大小vs動態圖像大小設置？

var image = new Image("path", width, height);

和寬度和高度是固定的。

我的第二個想法是（B）在加載後設置圖像的寬度和高度。在這種情況下，只有在有渲染請求時纔會向服務器請求圖像。圖片加載後，它根據元數據設置寬度/高度。像這樣：

var image = new Image("path"); 

    // somewhere into the renderer after the image has been loaded 
    image.setWidth(width); 
    image.setHeight(height);

來源

2013-04-22 Totty.js

那麼就頁面權重而言，你會更好地使用負責任的響應式圖像與前者。想象一下在27英寸顯示器和iPhone上瀏覽相同的頁面。

您可以檢測屏幕尺寸並加載合適尺寸的圖像，以便不會爲320像素寬的iPhone加載600kb英雄圖像。您可以加載該映像的15kb寶貝兄弟。

在你的第二個例子中，當你計算出大小的時候，你已經加載了圖像，所以你失去了通過加載較小版本的圖像來節省帶寬的機會。

另外，根據源函數中源函數的順序，如果在加載後調整圖像大小，可能會導致重繪，這很慢並且有些跛腳。

來源

2013-04-22 22:38:05 coulbourne

感謝您的洞察力，我甚至沒有考慮根據其大小加載資源的部分。但更好地思考圖像的寬度和高度將會被編碼。我可以使用比例因子，然後當我加載圖像時，它將基於當前比例*大小，因此它會爲正確的比例加載正確的圖像（因此正確的屏幕大小） – 2013-04-22 23:11:14

您是否使用此操作DOM ，還是在圖像顯示之前進行此操作？ – coulbourne 2013-04-23 02:23:58

好吧，它有點複雜：渲染器將節點渲染並呈現它們。默認（愚蠢低性能）渲染器將所有內容渲染到畫布上。聰明的人會注意到時間已經移動了，呈現的時間和選擇將其渲染到畫布中並將圖像放在DOM元素中。 – 2013-04-23 07:58:29

針對瀏覽器遊戲框架的硬編碼圖像大小vs動態圖像大小設置？

回答

相關問題