how do I pre load images for mobile website (e.g. http://m.youtube.com/, http://m.zoosk.com/)

views:

264

answers:

how do I pre load images for mobile website (e.g. http://m.youtube.com/, http://m.zoosk.com/)

I used this method: CSS Throwdown - Preload Images without JavaScript By Jeff Starr - http://perishablepress.com/press/2007/07/22/css-throwdown-preload-images-without-javascript/

It works fine when I view it in web browser, however on mobile, it doesn't seem to have any effect, .png icons still takes too long to load.

+1 A:

Preloading doesn't make everything magically faster - it just means that requests are sometimes issued before the data is required. Is the preloading happening at all? Perhaps things are just slow because the mobile connection isn't great.

That method of preloading images looks to me like it'll work fine on mobile browsers - I highly doubt mobile browsers "optimise" by not fetching images are not visible.

Dominic Rodger 2009-09-15 09:02:26

Thanks Dominic. It's most probably not a great mobile connection. No, it doesn't seem like the preloading is happening at all. I only use icons on the landing page, which takes ages to load, even though I specified the width and height the icon eventually load after everything is loaded. I looked at some reference sites with more/bigger images, which loads almost instantly from the same phone. I viewed their source code and cannot pick up any kind of preload script or css. I'm a bit stumped, hence the question if there's perhaps another way I don't know of. Thanks again for the reply.

2009-09-15 09:23:49

Hi Chris - the only thing I can think is that maybe the connection from your server is not as good as youtube's, but then it'd be slow in a regular browser too. What mobile browser are you using? Have you tried other preloading techniques?

Dominic Rodger 2009-09-15 15:49:40

Hey DominicI'm testing on a number of different phones' default browser, however I also use Opera mini from time to time. I have not tried any preloading techniques that requires javascript - my brief doesn't allow me to use javascript for this site. I'm now busy replacing icons with a CSS sprite solution to see how that affects page load times - fewer HTTP requests and a smaller total file size to load. Could you recommend any alternative preloading techniques by any chance? RegardsChris

2009-09-16 10:31:12

Sprites might help - though it'll mean extra CSS, and you'll have to wait for the whole sprite image to load before any images show up. I can't think of a better way to do it though.

Dominic Rodger 2009-09-16 10:46:24

If the mobile browser doesn't support javascript (or support javascript well enough) then preloading that way may not work.

I expect it's also unlikley that preloading with javascript would work on any browser or proxy which uses transcoding or pre-rending on the server.

Have you tried the old school (90's) approach to preloading which was to include the image on the homepage (or even each page) but sized to 1px by 1px (could also maybe try 0x0). This could mean that the user is paying to download more content than they need. Which is an issue to consider.

First thing to do is: make sure you really need the image; make it as small as possible (physical size & image encoding compression); and [gzip] compress the file as it's sent over HTTP. Also make sure that you're doing everything you can to allow the user/client browser to correctly cache the images.

Matt Lacey 2009-09-25 20:48:43

Have you actually read the linked article? It pretty much describes your way, and doesn’t use JavaScript.

Konrad Rudolph 2009-10-02 07:24:45

yes I have, thanks Konrad. In the question I mentioned it is also the method I used on the site, however it seemed to be a bit slow on the initial load. With a combination of adjusting compression, the CSS preload method and browser cache on it seems to be fine for this project, at least for now. Regards

2009-10-02 11:18:16

Konrad - Yep, I misread the original question and just made some general comments about preloading on mobile.Other general things to consider would be transcoders and browsers potentially rendering to the specified size and then having to rerender the image at the actual desired size.Chris - have you verified that the image request is being made to the server, on the preload attempt?

Matt Lacey 2009-10-02 12:27:33

If your site is going to be aimed at mobiles, and not just the one you are testing with, you might have difficulty in finding a universal solution that works across all mobile browsers. If you want to improve the download time of the image, maybe you could consider adjusting the compression of the image to reduce the size?

James 2009-10-02 07:19:58

thanks, eventually did adjust the compression with the CSS preloading and it seems to be working okay for now, initial load a bit slow but from then the browser also caches icons which helps.

2009-10-02 12:25:44

ansaurus

tags:

views:

answers:

how do I pre load images for mobile website (e.g. http://m.youtube.com/, http://m.zoosk.com/)

related questions