Loading Placeholder Not Working (Neither is the Preload)

**questions** · 07-07-2013, 06:53 AM

Hi,

I am trying both to preload and/or to place a loading.gif placeholder behind images in a list (the menu) while it loads and it just doesn't work.

The webpage:

Code:

http://ioanacolor.com

The placeholder CSS code:

Code:

		.menu-grid ul li img {
			background: url(loading.gif) center no-repeat !important;
			}

The placeholder page head code:

Code:

		<script>
		;(function(){
		var img1 = new Image();
		img1.src = 'loading.gif';
		})();
		</script>

The preloading code (at the bottom of the page currently, though I also tried it in the head and it didn't work):

Code:

    <div class="hidden">
        <script type="text/javascript">
		<!--//--><![CDATA[//><!--
			var images = new Array()
			function preload() {
				for (i = 0; i < preload.arguments.length; i++) {
					images[i] = new Image()
					images[i].src = preload.arguments[i]
				}
			}
			preload(
			"image1.jpg",
                        "image2.jpg"
			)
		//--><!]]>
	</script>
    </div>

Thanks!

**Beverleyh** · 07-07-2013, 08:32 AM

I'm currently on iPhone so I'm only seeing the mobile version of your site. Still, I have some thoughts that might prove useful.

The first thing I noticed from your post code is that you're trying to put a loading gif behind every image in a list. Is that correct? I don't know what your desktop menu looks like but should it just be a background image for the <ul> element instead?

Code:

		.menu-grid ul {
			background: url(loading.gif) center no-repeat !important;
			}

or if you really just do want the loading gif behind each list item, try putting on the <li> element;

Code:

		.menu-grid ul li {
			background: url(loading.gif) center no-repeat !important;
			}

In either case, you might need to define heights for the <ul> and <li>s

My next observation on viewing your page is that it took a very long time to load, almost to the point if me wanting to close my iphone browser tab. Now, I know I'm on iPhone but i still have a high speed Internet connection on wifi, so this shouldn't be the case. I suspect that your images need some attention to help speed-up the load times. DD has an image optimisation tool here: http://tools.dynamicdrive.com/imageoptimizer/ . Alternatively, for batch conversions try this free tool called Shrink-O-Matic: http://toki-woki.net/p/Shrink-O-Matic/
Optimising to 60% - 75% for jpeg is standard for the web and the human eye cant really see a difference. You can a little bit if you scrutinise side-by-side, but your visitors wont see the original so they wont ever get to do that. I'm hoping that once the images are properly optimised, load-time will be slashed to at least a quarter of its current time so that should make things load 4 times faster (although I reckon you could optimise things to 6 times faster) and then that should hopefully have the side-effect of eliminating the need for any preload scripts.

Lastly, I took a peek at your source code and noticed some chunks of conditional IE content advising visitors with IE8 and lower to view your website in IE9, or another browser, that supports HTML5. I would advise you not to do this. 1) Your average Joe visitor doesn't know what HTML5 is so its pointless even mentioning it, and 2) despite your intention and move to HTML5 (for those of us who know what it is) any notification to use another web browser can give the impression of looking amateurish - a website should just "work".
There is a very easy fix though - just serve the HTML5shiv to IE8 or less: http://code.google.com/p/html5shim/ Just pop this line of code...

Code:

<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

in the <head> section, before any other JavaScript. This will allow IE8 and lower to render new HTML5 tags, so you can take out those conditional notifications and your visitors with old IE will never know - the HTML5 tags will in fact render fine.

**jscheuer1** · 07-07-2013, 01:59 PM

Do you want a loading image for the menu or for the slideshow?

**questions** · 07-07-2013, 09:52 PM

Hi,

Wow, thanks a lot.
1. I can't define the heights since the list "boxes" / items resize/are sized based on a (width) percentage of the width of the screen.

2. I do optimize them, exporting from Photoshop and Illustrator at 80% because any lower to me does show, but they are big images, so I'm not sure what to do. I can try to see what they look like at 60%, but I imagine they'll look pretty poor.

The iPhone version is just the re-sized version of them on a big website, it's not smaller images. Maybe that makes a difference. I don't have time/resources to design a whole different website for the iPhone.

3. Thanks for the tip on the HTML5. I didn't know what to put. Microsoft just sucks is what I really wanted to say! Just don't use that pathetic browser!

4. And, yes, I want a loading image both for the menu and the slideshow.

Thanks!

**questions** · 07-07-2013, 09:59 PM

To help with the speed, I had thought of putting the first image in the slideshow as the background image to it, that loads first, and then the rest of the slide images load without you knowing it.

That's fine, except the slideshow I use shrinks as you shrink the webpage (it's a percentage of the page), and I couldn't figure out how to shrink the background image also.
So the slideshow would shrink, but the background image stayed huge.

**Beverleyh** · 07-07-2013, 10:50 PM

To scale/shrink a background image in a fluid design you can use the background-size attribute, with the cover setting;

Code:

.menu-grid ul li {
background-image:url(path/to/img.jpg);
background-size:cover;
-moz-background-size:cover;  /* Firefox 3.6 */
background-position:center;  /* IE 7+8 */
}

Alone it falls flat on its bum in IE 7+8, so the center position, like what you already have, provides a reasonable fall-back.

For your images, 80% is still pretty high, although its good to hear that you've already considered and implemented some optimisation. I pulled off one of your pics earlier and optimised it to 60%, which resulting in a 50% saving and still IMO looked good, so its worth squeezing out a bit more if you can. Most of the time I optimise to 60% in Photoshop and find that it suits my needs but I understand how you might want to retain a slightly higher quality if you're showcasing artwork. What if you try 70% instead? Or, do you have Fireworks bundled with your Photoshop/Adode suite? That does a better compression job on jpegs so you'll get smaller images with a better quality than using Photoshop's default 'Save For Web' settings.

Also, sometimes I find with artwork where a reduced colour palette has been used - eg) your b/w 'ink blot' paintings, the bird in a tree and squirly yellow piece - if you switch to the png-8 format, you'll get a much bigger saving than from using jpeg, and keep quality, simply because that image format only supports a max of 256 colours. You also won't get the same smudgy artefacts introduced that you do during a heavy jpeg optimisation - block pixel speckling maybe, but with a textured canvass shot, that somehow seems more forgiving. Anyway, have a play and see what combination offers the smallest combined size.

No worries about deciding against a mobile specific website. iPhones processors are pretty capable and can handle most websites fine. I find the physical dimensions more problematic than the loading of web page resources/assets (and hover vs touch activations), but with the zoom feature, that's not such a big deal either.

**questions** · 07-08-2013, 01:38 AM

Thanks!

I haven't tried Fireworks, but I'll look into it!

I've saved out some PNGs from Illustrator, for the vector drawings like you say it's fine, and they are lower, but they're not as colorful because Photoshop converts to sRGB and Illustrator save for web doesn't.
But PNGs from Photoshop were actually huge memory wise, so I did JPGs.

Of note, unrelated, but interesting, for uploading to Facebook which downgrades images and makes vector drawings quite horrible looking, only PNGs work, but set at either 720px or 960px in one governing dimension, so they're not downgraded.