Image Hotlinking and Slow Page Loads

Adding Hotlinked images to a page prevents the page from loading at all.

[jiffybank]

Hi,

I'm new to webmasterworld, having read a lot but never posted.

Anyway, we have a blog type website where we allow our users to hotlink images that they host on other servers.

The problem is, sometimes a page takes forever to load when it contains hotlinked images. It usually displays the very beginning of the page right away, then just hangs as it tries to load in the images. I understand that the images themselves can take a while to load, especially from several servers on the same page. However, I would like to have all of OUR content load right away and have the images just come in when they're done. Then at least it wouldn't look like our site is the slow one.

I've read something about specifying explicit widths and heights on the img tag, but we can't do that as we don't know the dimensions of their image without fetching it first.

Any advice would be much appreciated.

Thanks in advance,
Geoff

[Candid India]

Welcome to Webmaster World Geoff!

Your problem is quite genuine as probably there is no restriction on the size of the images being uploaded. By size I don't mean specifying the widths and heights but the file size. You need to tell your members that the images need to be optimized for web before they are loaded. You can put in a restriction (of say 900 KB or less). As you said it's a blog like website, I feel lower resolution images would serve the purpose and there should not be a need for uploading the actual (unoptimized) images.

[edited by: Candid_India at 11:25 am (utc) on July 28, 2006]

[jiffybank]

Hi Candid,

Thank you for the welcome and the reply! We do not control the image sizes as they are hotlinked from other servers. I guess the crux of my question is:

Is it possible to get the rest of the page to load while waiting for hotlinked images?

Or is the only way to do that to specify a width and height on the image tag?

Thanks,
Geoff

[penders]

Hi Geoff, specifying a width and height on the img tag would not in itself speed up the loading of the page (I don't think), although it would 'reserve' the space on the page so that the page wouldn't 'move around' as the images are loaded.

Also, regardless of the size of the hotlinked images, they may just be on a really slow server.

I guess a possibility might be to write out a dummy image (a small hotlinked icon or something, stored locally) for all your hotlinked image tags when the page first loads, ie:

<img class="hotlinkimg" src="hotlinked_icon.gif" alt="External Image" title="http://www.realurlgoeshere.co.uk/their_image.jpg">

Then in the document.onload event (when the page has loaded), use JavaScript to step through all your hotlinked images (<img class="hotlinkimg"...) and substitute the src attribute for the real url of the image (the contents of the title attribute in this case).

That way the YOUR page will have already loaded before even trying to mess with your hotlinked images.

I've not actually tried that before, but it sounds reasonable!

[jiffybank]

Hi penders,

Thanks for the reply.

In my experience, specifying a width and height on images DOES allow the rest of the page to load before the images are done loading. On our site we allow users to hotlink avatars, and since we fix avatar dimensions, a page loads before all the avatar images are loaded.

Anyway, your idea to load hotlinked images on the page load event is very clever! Unfortunately, it wouldn't work easily on our site as the textile code for hotlinked images is buried in larger blobs of text. We would have to dig in to each post, see if there are any hotlinked images, and act accordingly. Possible, but it sounds like a lot of work.

I was hoping for some magical META tag like flush-page-before-loading-all-images or something similar. Maybe that was wishful thinking.

Any other ideas? This has to be a common problem.

Geoff

[kaled]

This sounds like a rendering problem related to unknown widths and heights. Are the images floated so that text flows around them?

I assume you're using something like php. Presumably there is some way you could cache image sizes so that once an image is known, you can ensure its dimensions are specified.

Kaled.