有没有办法从顶部检查已加载多少图片（以像素为单位）？

Question

标题总和就是全部。虽然，这种情况是我有一个长（20x2000px）图片作为缩略图的精灵。如果我可以开始仅为已经加载了sprite的必需部分的缩略图显示精灵，并在此期间显示加载器，那将是很好的。

我只需知道从顶部以像素为单位加载了多少图片（假设它不是渐进的）。我想过用文件大小估算一下，虽然这样做会非常不准确。

每个人都有的主要问题 - 为什么要这样做？

有一个页面显示100个缩略图。如果这个页面有一个以缩减缩略图顺序生成的缩略图精灵，那将是一件好事。

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

  

@Guy听起来像是一个理论问题......根据你对下面答案的评论，如果你加载了10MB'精灵'，那你做错了。

不，如果可以实现这一点，那就没有错。这将在每次调用页面时将调用次数减少100。即使一切都被缓存，这也是一个显着的速度提升。

Answer 1

我知道你要做什么，但总之，你做不到。计算JavaScript中的像素，如果可能的话（可能使用画布？虽然我不这么认为）只会是不合理的资源消耗。然而，单独加载所有图像（即，不是作为一个精灵），将在大多数浏览器上为您提供您正在寻找的默认效果，尽管以更多请求为代价。

解决方案？使用内容分发网络（CDN），因此浏览器可以同时获取所有100个图像，而不必将压力放在您自己的服务器上。

Answer 2

编辑：

经过一些额外的搜索后，我发现了一个看起来像是here的解决方案，它类似于提供的解决方案here。基本思想是发出AJAX请求并监控进度。

---

如果我正确地理解了您，您希望避免页面加载（或偶数发生）的短暂时间段图像尚未完成传输但尚未出现在应有的位置。< / p>

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

如果您正在处理鼠标悬停事件或第一次请求精灵的类似事件，您可以在页面加载时通过JavaScript调用精灵图像来预加载精灵图像，因此它已经被缓存事件发生时准备就绪。

Answer 3

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

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

一旦用户登陆页面，我将继续检查sprite的加载字节数，循环显示待显示的每个条目，检查该值是否大于或等于条目“weight”并显示或者适当地继续循环。