Javascript 有没有办法检查图片从顶部加载了多少像素？

标题是全部。不过，我有一张长（20x2000px）的图片作为缩略图的精灵。如果我可以开始只为已经需要加载部分精灵的缩略图显示精灵，并同时显示加载程序，那将是一件好事

我所需要的只是知道有多少图片是以像素为单位从顶部加载的（假设它不是渐进式的）。我想用文件大小来估计，尽管这是非常不准确的

每个人都面临的主要问题是——为什么要这么做

有一个页面显示大约100个缩略图。这将是一件好事，如果这个页面有一个精灵的缩略图生成的降序缩略图

这样的页面已经存在。截图附在后面。加载精灵时，用户可以看到灰色占位符。我只想在该缩略图所需的精灵部分已加载时显示该缩略图

---

@这家伙听起来像个理论问题。。。根据你对下面答案的评论，如果你正在加载10MB的“精灵”，那你就错了

不，如果能做到这一点，这没有错。这将使每次调用页面时的调用次数减少100次。即使缓存了所有内容，这也是一个显著的速度提升。

编辑：

经过一些额外的搜索，我找到了一个看起来像是解决方案，并且与提供的解决方案类似。其基本思想是发出AJAX请求并监视进度

---

如果我理解正确的话，您希望避免在页面加载（或甚至发生错误后）的短暂时间内，图像尚未完成传输，并且尚未显示在它们应该显示的位置

我认为您将遇到的问题（如果这是加载页面的场景）是，您正在等待占位符图像和精灵通过连接。当你的占位符结束时，你的精灵可能已经到达了那里，或者已经落后了几毫秒，而且你还没有避免上述情况

---

如果您正在处理mouseover事件或类似的首次请求精灵的事件，则可以在页面加载时通过JavaScript调用精灵图像来预加载精灵图像，这样当事件触发时，它就已经被缓存并准备就绪。

我知道您正试图做什么，但简而言之，您不能。在JavaScript中计算像素，如果可能的话（可能是使用canvas？我不这么认为），只会不合理地消耗资源。然而，单独加载所有图像（即，不是作为一个sprite）将给您提供您在大多数浏览器上所期望的默认效果，尽管这是以增加请求为代价的

---

解决方案是什么？使用内容交付网络（CDN），这样浏览器可以同时获取所有100个图像，而不必给您自己的服务器带来压力。

我已经有了一个理论解决方案。在我开始工作之前，如果有人能告诉我我的想法中是否有任何重大错误，那就太好了

图像在服务器端生成，屏幕截图一个接一个。因此，在每个屏幕截图合并到sprite中后，我可以将缩略图大小信息与相应的条目一起保存到数据库中

---

一旦用户登陆页面，我将继续检查精灵加载了多少字节，循环检查每个待显示的条目，检查值是否大于或等于条目“权重”，并适当显示或继续循环。

问题：为什么？？如果我们知道目标，也许我们可以提供更好的解决方案…因为这不是一个很大的形象。。你就不能等整个文件吗？似乎需要很多额外的处理来获得很少的感知价值。@Fosco，大小是理论上的。实际上，它可以是任何东西。@这家伙听起来像是一个理论问题。。。根据你对下面答案的评论，如果你加载10MB的“精灵”，你就错了。我知道如何预加载图像。问题不在于这个。据推测，如果sprite是10mb，那么用户将等待一段安静的时间。因此，我希望检查是否有一种方法可以查看精灵加载了多少，并开始显示准备就绪的缩略图。我不知道有什么方法，但想提供一些可能有用的替代信息。我不知道你做什么或不知道什么，所以我想最好提供更多的信息，而不是更少：）另一个选项是将占位符设置为默认图像，然后等待页面完成加载。然后在那时交换精灵，您就保持了良好的用户体验另外，你能提供一个链接到你在上面截图的网站吗？这个网站还没有公开，而且在几周内都不会公开。您建议的替代方法比实际情况更糟糕，因为它需要用户等待缩略图完全加载，然后才能发布感兴趣的内容。我建议的替代方法基于我必须提供的少量信息，以及基于最常见的使用精灵方式对您如何使用精灵的假设。这是一种独特的情况，因为精灵似乎向用户提供了页面的几乎整个视觉部分。我自己也很好奇，所以我会做一些挖掘，看看你的问题是否有解决方案。那不是解决方案。这是最简单的解决方法，完全没有考虑到我为什么要这么做——优化。如果一个解决方法解决了最初的问题，它怎么不是解决方案呢？就像有人问你一样我需要在10分钟内从a点到B点，相隔100英里，然后你回答–

运行

。这只解决了问题的一部分，我认为这不是一个有效的比较