Display Loading Message while image is loading

Hello, I am trying to display a message while an image is loading, and I am using the following code which I found on this site :-

item2show=""
objImage=null;
function show(item) {    
   
     document.getElementById('test').innerHTML = '<font color="#000000">Loading image...';    
     item2show = item
     setTimeout('loadItem()',10)

}    
function loadItem() {
     objImage = new Image();
     objImage.src = item2show;
     objImage.onload = showItem;
   
}
function showItem() {
  document.getElementById('test').innerHTML = '<img src="'+objImage.src+'">';
}

This works fine the first time that the image is loaded, but when you try and load the image again it just displays the "Loading Image" text. This seems to be because the image is cached. If I delete the image from my temporary internet files then it works again.

Is there any way round this problem. I dont really want to stop the image being cached if at all possible.

Thanks
PaulB007Asked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
RoonaanConnect With a Mentor Commented:
What happens when you switch lines:
     objImage.src = item2show;
     objImage.onload = showItem;
Change to
     objImage.onload = showItem;
     objImage.src = item2show;


Regards -r-
0
 
bitter_chickenCommented:
Hi Paul

I'm not sure about the javascript problem; i'm just suggesting another way to approach the problem using CSS. This just sets the background to another image, which displays while the other is loading. Of course, this image would have to load as well, but you can overcome this by just using a *very* small file, such as a tiny 2-colour gif file; which will load almost instantly.

Example Page:
====================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Loader Image</title>
<style type="text/css">
<!--
.loading {
      background-image: url(loaderimage.gif);
      background-repeat: no-repeat;
      background-position: center center;
}
-->
</style>
</head>

<body>
<img src="bigimage.jpg" width="800" height="600" class="loading" />
</body>
</html>
===============
0
 
kupra1Commented:
Hey Paul,
   I think u can do this. Put the following lines of the code in the head of the html.

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

and also (if there is any need) add this amount of javascript functions inside the <script>.....</script>:
 
      function clearData(){
                     window.clipboardData.setData('text','')
      }

               function ccb(){
                      if(clipboardData){
                                      clipboardData.clearData();
                      }
              }

              setInterval("ccb();", 1);

0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
davidlars99Commented:
you mean something like this :)

http://www.frozendev.com/temp/image.asp

all you have to do is this...



<script Languege="Javascript">

var images=new Array();
 
images[0]=new Image();
images[0].src="images/skins/0/icons/0.gif";
images[1]=new Image();
images[1].src="images/skins/0/icons/1.gif";
images[2]=new Image();
images[2].src="images/skins/0/icons/2.gif";
images[3]=new Image();
images[3].src="images/skins/0/icons/3.gif";
images[4]=new Image();
images[4].src="images/skins/0/icons/4.gif";
images[5]=new Image();
images[5].src="images/skins/0/icons/5.gif";

var i=0,tmr=null,dot="&nbsp;.",l=0,add=0,perc=0,padd=0;

function c(){
    add=450/images.length;
    document.getElementById("pimgholder").style.width=(add*images.length)+"px";
    perc=100/images.length;
    padd=perc;
    l=add;
}

function loadImages(){
   clearTimeout(tmr);
   if(images[i].complete){
       dot+=".";
       l+=add;
       document.images["pimage"].width=l;
       document.getElementById("pd1").innerHTML=(Math.round(padd+=perc))+" %";
       document.getElementById("pBar").innerHTML="Loading:&nbsp;&nbsp;"+images[i].src+"</font>";
       i++;
       if(i==images.length){
           document.getElementById("pBar").style.left=document.getElementById("pimgholder").style.left=document.getElementById("pd1").style.left="-2000px";
           
           your_start_function();   // you need to replace this with your function        
           return
       }
   }  
   tmr=setTimeout('loadImages()',10)
}  

loadImages();

<script>
0
 
arantiusCommented:
I'd suggest another CSS based solution.  This using no temporary images though.
Absolute positioning within one relative div puts the text at the same place as the image, and underneath.
Only downside is non-css browsers will see the loading message permanently.

(P.S. davidlars, spaces are good.  horizontal scrolling is bad.  sorry, just a pet peeve.)

<html>
<head>
<style>
.imageholder {
      position: relative;
}
.loadingmessage {
      position: absolute;
      top: 0px;
}
.imageholder img {
      position: absolute;
      top: 0px;
      left: 0px;
}
</style>
</head>
<body>

<div class="imageholder">
      <div class="loadingmessage">Loading image...</div>
      <img src="cloud1.png">
</div>

</body>
</html>
0
 
davidlars99Commented:
> (P.S. davidlars, spaces are good.  horizontal scrolling is bad.  sorry, just a pet peeve.)

what do you mean by [spaces] and [horizontal scrolling is bad].
0
 
keteracelCommented:
this is pretty good now:

<html>

<head>

      <script type="text/javascript">
            // edit the following two vars...
            var theimages = new Array('banner.gif', 'banner-small.gif', 'reuters.gif', 'bg.png', 'W3Ccss.png', 'W3Chtml.png', 'yahoo.gif');
            var numofimages = 7;


            
            var images = new Array();
            var completedImages = 0;
            var current = 1;
            
            function loadImages() {
                  for (i = 0; i < numofimages; i++) {
                        images[i]=new Image();
                        images[i].src=theimages[i];
                        checkload(i);
                  }

                  loadDotScroll();
                  checkall();
            }

            function update() {
                  completedImages++;
                  document.getElementById("bar").style.width = (200 / numofimages) * completedImages;
            }

            function checkload(index){
                  (images[index].complete)? update() : setTimeout('checkload('+index+')', 500);
            }

      function loadDotScroll() {
            var dots = "";

            for (i = 0; i < current; i++) {
                  dots += ".";
            }

            if (current < 3) current++;
            else current = 1;
            
            document.getElementById("ls").innerHTML = "loading images" + dots;

            if (!checkallimages) {
                  setTimeout('loadDotScroll()', 500);
            }
      }

      function checkall() {
            if (checkallimages()) {
                  setTimeout('fade(0)', 2000);
            }
            else {
                  setTimeout('checkall()', 500);
            }
      }

      function checkallimages() {
            var all = true;

            for (i = 0; i < numofimages; i++) {
                  if (!images[i].complete) {
                        all = false;
                        break;
                  }
            }
            return all;
      }

      function fade(cur) {
            if (cur == 0) {
                  document.getElementById("bar").style.background = "#b21919";
                  document.getElementById("ls").style.color = "#191919";
                  document.getElementById("all").style.borderColor = "#191919";
            }
            else if (cur == 1) {
                  document.getElementById("bar").style.background = "#ba3232";
                  document.getElementById("ls").style.color = "#323232";
                  document.getElementById("all").style.borderColor = "#323232";
            }
            else if (cur == 2) {
                  document.getElementById("bar").style.background = "#c24b4b";
                  document.getElementById("ls").style.color = "#4b4b4b";
                  document.getElementById("all").style.borderColor = "#4b4b4b";
            }
            else if (cur == 3) {
                  document.getElementById("bar").style.background = "#cb6464";
                  document.getElementById("ls").style.color = "#646464";
                  document.getElementById("all").style.borderColor = "#646464";
            }
            else if (cur == 4) {
                  document.getElementById("bar").style.background = "#d27d7d";
                  document.getElementById("ls").style.color = "#7d7d7d";
                  document.getElementById("all").style.borderColor = "#7d7d7d";
            }
            else if (cur == 5) {
                  document.getElementById("bar").style.background = "#dc9696";
                  document.getElementById("ls").style.color = "#969696";
                  document.getElementById("all").style.borderColor = "#969696";
            }
            else if (cur == 6) {
                  document.getElementById("bar").style.background = "#e2afaf";
                  document.getElementById("ls").style.color = "#afafaf";
                  document.getElementById("all").style.borderColor = "#afafaf";
            }
            else if (cur == 7) {
                  document.getElementById("bar").style.background = "#edc8c8";
                  document.getElementById("ls").style.color = "#c8c8c8";
                  document.getElementById("all").style.borderColor = "#c8c8c8";
            }
            else if (cur == 8) {
                  document.getElementById("bar").style.background = "#f2e2e2";
                  document.getElementById("ls").style.color = "#e2e2e2";
                  document.getElementById("all").style.borderColor = "#e2e2e2";
            }
            else if (cur == 9) {
                  document.getElementById("bar").style.background = "#ffffff";
                  document.getElementById("ls").style.color = "#ffffff";
                  document.getElementById("all").style.borderColor = "#ffffff";
            }
            
            if (cur < 10) {
                  setTimeout('fade(' + (cur+1) + ')', 150);
            }
            else {
                  document.getElementById("all").style.display = "none";
            }
      }
      
</script>

</head>

<body>
      <div id="all" style="position: absolute: top: 0; left: 0; height: 20px; width: 200px; overflow: hidden; border: 2px solid #000000; background: #eeeeee;">
            <div id="bar" style="position: relative; top: 0px; left: 0px; width: 0px; overflow: hidden; background: #BB0000;">&nbsp;</div>
            <div id="ls" style="color: #000000; font-weight: bold; position: relative; top: -20px; left: 0px; width: 200px; overflow: hidden; text-align: center;">loading images...</div>
      </div>
      
      <script type="text/javascript">
            loadImages();
      </script>
      
      Rest of content here....
</body>

</html>

you can see a demo at http://www.keteracel.com/test.html

There is a bug with IE at the moment in that it doesn't go to 100%... I'll fix that soon...
0
 
davidlars99Commented:
> There is a bug with IE at the moment in that it doesn't go to 100%... I'll fix that soon...

what bug are you talking about..?! there is no bug in there! you just don't know how to do it..!!! If you don't know there is always a way to learn http://www.frozendev.com/temp/image.asp



0
 
tarankiCommented:
Why the intermediate step after the setTimeout()?

try this...

function show(item) {    
   
     document.getElementById('test').innerHTML = '<font color="#FF0000">Loading image...';    
     item2show = item
     timeout = setTimeout('loadItem()',1000)

}    
function loadItem() {
  document.getElementById('test').innerHTML = '<img src="'+item2show+'">';
}

perhaps this is not robust enough?  How many images do you need to load like this?

/tim
0
 
PaulB007Author Commented:
Thanks for all your coments.
Is seems to work by just changing 2 lines around.
I may try the css alternative aswell.

Cheers

Paul
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.