javascript - 浏览器游戏框架的硬编码图像大小与动态图像大小集？

Question

我想知道拥有一个框架的缺点和优点，其中（A）你设置图像是这样的：

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);

Answer 1

就页面重量而言，您将能够更好地负责任地使用响应式图像。想象一下在 27 英寸显示器和 iPhone 上查看同一页面。

您可以检测屏幕尺寸并加载适当尺寸的图像，这样您就不会为 320 像素宽的 iPhone 加载 600kb 的主图像。您可以加载该图像的 15kb 小弟弟。

在您的第二个示例中，您在确定大小时已经加载了图像，因此您失去了通过加载较小版本的图像来节省带宽的机会。

此外，根据此函数在源顺序中的位置，如果在加载后调整图像大小，您可能会导致重绘，这很慢而且有点蹩脚。