4

我有一个 5MB 的图像,加载大约需要 2-3 分钟。当它加载时,我想要一个加载屏幕。加载图像后,该加载屏幕将消失。(图像是一个精灵图像;我使用 CSS 来分割它)。

如果这是可能的,那我该怎么做?如果这是不可能的,那么我可以使用哪些其他方法来隐藏图像的加载(或降低图像大小)?

4

2 回答 2

4

该图像是精灵图像。

我使用 css 来拆分它们。

除非有没有说明的附加信息,否则在 5MB 时您已经击败了 CSS sprite 的任何优势。将其拆分为单独的文件并按需延迟加载。

如果您正在使用/可以使用 jQuery ,那么这个插件可以很好地完成延迟加载。

还要确保您使用的是尽可能最好的压缩。即使您必须使用无损压缩,仍然可以通过从图像文件中删除元数据来获得一些收益。

Photoshop 中的“保存为 Web”非常适合平衡有损压缩(质量与大小),还可以让您选择不在图像文件中嵌入元数据。如果您无法访问 Photoshop,则可以使用 Yahoo SmushIt 之类的工具。

于 2012-05-04T09:27:04.457 回答
1

只需将页面/元素隐藏在某个加载层后面,并在加载图像后删除该层:

<!-- 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…&lt;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()用作事件处理程序,直到所有页面内容完全加载后才会触发。

于 2012-05-04T10:03:52.140 回答