javascript - How can I show a loading screen while a really large image is loading? - Stack Overflow

admin管理员组

文章数量:1388134

I have a 5MB Image that takes about 2-3 mins to load. While It loads, I want to have a loading screen. That loading screen will disappear after the images loaded. (The image is a sprite image; I use CSS to split it).

If this is possible, then how can I do it? If this isn't possible, then what other ways can I use to hide the loading of the image (or lower the image size)?

I have a 5MB Image that takes about 2-3 mins to load. While It loads, I want to have a loading screen. That loading screen will disappear after the images loaded. (The image is a sprite image; I use CSS to split it).

If this is possible, then how can I do it? If this isn't possible, then what other ways can I use to hide the loading of the image (or lower the image size)?

• javascript
• html
• css

Share Improve this question Follow edited May 4, 2012 at 9:29 No Results Found 103k3838 gold badges198198 silver badges231231 bronze badges asked May 4, 2012 at 9:22 KevinT.KevinT. 37266 silver badges1616 bronze badges 2

• 2 I assume the image needs to be insanely large? – Alex Hadley Commented May 4, 2012 at 9:25
• 2 2-3 minutes for 5MB? Where are you located at? On the moon? – feeela Commented May 4, 2012 at 10:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

That image is a sprite image.

I use css to split them.

Unless there is additional information which hasn't been stated, at 5MB you have defeated any advantages of a CSS sprite. Split it into separate files and lazy load on demand.

If you are using/can use jQuery this plugin does a nice job lazy loading.

Also ensure that you are using the best pression possible. Even if you must use lossless pression, there are still some gains which can be made by removing metadata from the image files.

"Save for Web" in Photoshop is great for balancing lossy pression (quality versus size) and also gives you the option to not embed metadata in image files. You can use a tool like Yahoo SmushIt if you don't have access to Photoshop.

Just hide the page/element behind some loading layer and remove that layer after the images are loaded:

<!-- 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>

The trick is to use $(window).load() as event handler, which does not get fired until all page contents are fully loaded.

本文标签： javascriptHow can I show a loading screen while a really large image is loadingStack Overflow