我有一个5MB图片需要大约2-3分钟才能加载。当它加载时,我想要有一个加载屏幕。装入图像后,加载屏幕将消失。 (该图像是一个精灵图像;我使用CSS来分割它)。如何在加载真正大图时显示加载屏幕?
如果这是可能的,那我该怎么办呢?如果这是不可能的,那么我还可以使用其他方法来隐藏图像加载(或降低图像大小)?
我有一个5MB图片需要大约2-3分钟才能加载。当它加载时,我想要有一个加载屏幕。装入图像后,加载屏幕将消失。 (该图像是一个精灵图像;我使用CSS来分割它)。如何在加载真正大图时显示加载屏幕?
如果这是可能的,那我该怎么办呢?如果这是不可能的,那么我还可以使用其他方法来隐藏图像加载(或降低图像大小)?
该图像是一个精灵图像。
我使用CSS来拆分它们。
除非有额外的信息没有说明,否则在5MB时你已经击败了CSS精灵的任何优点。将其分割成单独的文件和按需延迟加载。
如果您使用/可以使用jQuery this plugin做得很好,延迟加载。
另外请确保您使用的是最好的compression。即使您必须使用无损压缩,仍然可以通过从图像文件中删除元数据来获得一些收益。
在Photoshop中“保存为Web”非常适合平衡有损压缩(质量与大小)并且还可以选择不在图像文件中嵌入元数据。如果您无法访问Photoshop,则可以使用雅虎SmushIt之类的工具。
BTW:Gimp有一个类似的“Save for Web” - 选项... – feeela
只是躲在一些装载层的页面/元素和图像加载后删除层:
<!-- 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-3分钟5MB?你在哪里?在月球上? – feeela