标题总和就是全部。不过，这种情况是我有一张长（20x2000px）的图片作为缩略图的精灵。如果我可以开始只为已经加载了所需部分精灵的缩略图开始显示精灵，同时显示加载器，那就太好了。
我只需要知道从顶部开始以像素为单位加载了多少图片（假设它不是渐进式的）。我想用文件大小来估计，虽然那会很不准确。
每个人都有的主要问题 -为什么要这样做？
有一个页面显示大约 100 个缩略图。如果这个页面有一个按缩略图降序生成的缩略图精灵，那将是一件好事。
这样的页面已经存在。附上截图。加载精灵时，用户可以看到一个灰色的占位符。我只想在该缩略图的精灵所需部分已加载时才显示缩略图。
@Guy 听起来像是一个理论问题......根据您对下面答案的评论，如果您正在加载 10MB 的“精灵”，那么您做错了。
不，如果可以做到这一点，那就没有错。每次调用页面时，这将减少 100 次调用。即使所有内容都被缓存，这也是一个显着的速度提升。
我明白你想要做什么，但简而言之，你做不到。如果可能的话，在 JavaScript 中计算像素（也许用画布？我不这么认为）只会不合理地消耗资源。然而，单独加载所有图像（即，不是作为一个精灵）将提供您正在寻找的效果，作为大多数浏览器的默认值，尽管以更多请求为代价。
解决方案？使用内容交付网络 (CDN)，因此浏览器可以同时获取所有 100 张图像，而不必给您自己的服务器带来压力。
编辑：
经过一些额外的搜索，我发现这里看起来是一个解决方案，并且类似于这里提供的解决方案。基本思想是发出 AJAX 请求并监控进度。
如果我对您的理解正确，您希望避免在页面加载（或什至发生之后）的短暂时间段内图像尚未完成传输并且尚未出现在应有的位置。
我认为您将遇到的问题（如果这是加载页面的场景）是您正在等待占位符图像和精灵穿过电线。当你的占位符结束时，你的精灵可能已经到达那里或者落后几毫秒，并且你还没有避免上述情况。
如果您正在处理第一次请求精灵的鼠标悬停事件或类似事件，您可以在页面加载时通过 JavaScript 调用它来预加载精灵图像，因此它已经被缓存并准备就绪事件触发。
我已经有了理论上的解决方案。在我开始研究它之前，如果有人能告诉我我的想法是否有任何重大错误，那就太好了。
图片是在服务器端生成的，一个又一个的截图。因此，在每个屏幕截图合并到精灵之后，我可以将缩略图大小信息与相应的条目一起保存到数据库中。
一旦用户登陆页面，我将继续检查精灵加载了多少字节，循环遍历每个待显示的条目，检查值是否大于或等于条目“权重”并显示或继续适当循环。