如何在加载非常大的图像时显示加载屏幕？

Question

我有一张5MB的图片需要加载2-3分钟。在它加载时，我想要一个加载屏幕。当图片加载完成时，该加载屏幕将消失。（该图片是一个雪碧图；我使用CSS来分割它）。

如果这是可能的，那么我应该如何做呢？如果这不可能，那么我可以使用哪些其他方法来隐藏图片的加载（或减小图片大小）？

- KevinT.

---

我假设这张图片需要非常大吗？ - Alex Hadley

2-3分钟传输5MB？你在哪里？在月球上吗？ - feeela

Answer 1

那张图片是一个雪碧图。我使用CSS将它们分割开来。除非有未提及的额外信息，否则在5MB的情况下，您已经失去了CSS sprite的任何优势。将其拆分为单独的文件，并按需进行延迟加载。如果您正在使用/可以使用jQuery this plugin，它可以很好地实现延迟加载。还要确保您使用最佳compression。即使您必须使用无损压缩，仍然可以通过从图像文件中删除元数据来获得一些收益。Photoshop中的“保存为Web”功能非常适合平衡有损压缩（质量与大小）并且还提供了不嵌入图像文件元数据的选项。如果您无法访问Photoshop，则可以使用Yahoo SmushIt等工具。

- Tim M.

---

顺便提一下：Gimp有一个类似的“保存为Web”选项... - feeela

Answer 2

只需在加载层后面隐藏页面/元素，并在图像加载完成后删除该层：

<!-- within you site header -->
<script type="text/javascript">
/* display loader only if JavaScript is enabled, no JS-lib loaded at this point */
document.write('<div id="loader" style="display:table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; background: #fff;">'
    + '<div style="display:table-cell; vertical-align:middle; text-align: center;">'
    + 'loading…<br /><img src="icon.load.gif" />'
    + '</div></div>');
</script>


<!-- at the bottom of you HTML (right before closing BODY-tag) -->
<script src="jquery.min.js"></script>
<script type="text/javascript">
/* hide the loading-message */
$(window).load(function(){
    $('#loader').fadeOut(500);
});
</script>

关键是使用$(window).load()作为事件处理程序，它直到所有页面内容完全加载后才会触发。

- feeela