针对浏览器游戏框架的硬编码图像大小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动态图像大小设置？

回答

相关问题