Question

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

如果可以，那我该怎么办？如果这是不可能的，那么我还可以用其他方法来隐藏图像的加载（或降低图像大小）？

Answer 1

该图像是精灵图像。

我用css来分割它们。

除非有其他未说明的信息，否则在5MB的情况下你已经击败了CSS精灵的任何优点。根据需要将其拆分为单独的文件和延迟加载。

如果你正在使用/可以使用jQuery this plugin做一个很好的延迟加载工作。

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

Photoshop中的“Save for Web”非常适合平衡有损压缩（质量与大小），还可以选择不在图像文件中嵌入元数据。如果您无法访问Photoshop，则可以使用Yahoo SmushIt等工具。

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()作为事件处理程序，在所有页面内容完全加载之前不会被触发。

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

2 个答案: