Javascript 如何在加载超大图像时显示加载屏幕？
我有一个5MB的图像，加载大约需要2-3分钟。当它加载时，我想要一个加载屏幕。加载图像后，加载屏幕将消失。（该图像是一个精灵图像；我使用CSS分割它） 如果这是可能的，那么我该怎么做呢？如果这是不可能的，那么我可以使用什么其他方法来隐藏图像的加载（或降低图像大小） 那个图像是一个精灵图像 我使用css来分割它们 除非有额外的信息还没有说明，在5MB你已经击败了CSS精灵的任何优势。将其拆分为单独的文件，并根据需要延迟加载 如果您正在使用/可以使用jQuery，那么它在延迟加载方面做得很好 还要确保您使用的是尽可能最好的。即使必须使用无损压缩，也可以通过从图像文件中删除元数据来获得一些好处Javascript 如何在加载超大图像时显示加载屏幕？,javascript,html,css,Javascript,Html,Css,我有一个5MB的图像，加载大约需要2-3分钟。当它加载时，我想要一个加载屏幕。加载图像后，加载屏幕将消失。（该图像是一个精灵图像；我使用CSS分割它） 如果这是可能的，那么我该怎么做呢？如果这是不可能的，那么我可以使用什么其他方法来隐藏图像的加载（或降低图像大小） 那个图像是一个精灵图像 我使用css来分割它们 除非有额外的信息还没有说明，在5MB你已经击败了CSS精灵的任何优势。将其拆分为单独的文件，并根据需要延迟加载 如果您正在使用/可以使用jQuery，那么它在延迟加载方面做得很好 还要确
Photoshop中的“为Web保存”非常适合平衡有损压缩（质量与大小），还可以让您选择不在图像文件中嵌入元数据。如果您没有访问Photoshop的权限，可以使用类似Yahoo的工具。只需将页面/元素隐藏在某个加载层后面，并在加载图像后删除该层：
<!-- 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>
/*仅当启用JavaScript时才显示加载程序，此时未加载JS库*/
文件。写（“”）
+ ''
+“正在加载…”
+ '');
/*隐藏加载消息*/
$（窗口）。加载（函数（）{
$（“#加载程序”）.fadeOut（500）；
});
诀窍是使用
$（window.load（）