Image Loading Message in JavaScript

Slow-loading images can still present a problem for web designers. Digital cameras now commonly create multi-megabyte images, of course, and we all like to show high quality images whenever possible. But while high-speed Internet access is much more available, smartphones like the iPhone and Android, tablet computers like the iPad, and other mobile devices are often limited in their Internet access speed. And a substantial percentage of users worldwide still rely on slow dial-up access. So, for those pages where it can take more than 10 or 20 seconds to load completely, many webmasters want to show an "Image Loading" message to encourage users to be patient and to not just give up and leave their website.


This is an easy-to-use JavaScript method of handling the task of showing an "Image Loading" message - either in text using the "alt" attribute, or by replacing the "src" for the images that will take time to completely load. All it takes is adding a special class name to the img tag for the images you want to show your loading message, and including the file "image-loading.js" at the bottom of your web page with a script tag.

See my Image Loading Message Demonstration page to see how it works. You can download the script by pressing the button below.


RD Image Loading© is provided free of charge. If you use and enjoy this software, please place the following link on an appropriate page on your site:

a href="https://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a


This page was last modified on August 27, 2020



Copyright © 2005-2024 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!