Solved

Display Loading Message while image is loading

Posted on 2004-10-06
10
1,439 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:PaulB007
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 125 total points
ID: 12236319
What happens when you switch lines:
     objImage.src = item2show;
     objImage.onload = showItem;
Change to
     objImage.onload = showItem;
     objImage.src = item2show;


Regards -r-
0
 
LVL 5

Expert Comment

by:bitter_chicken
ID: 12236395
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
 
LVL 10

Expert Comment

by:kupra1
ID: 12236536
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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
LVL 13

Expert Comment

by:davidlars99
ID: 12237367
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
 
LVL 18

Expert Comment

by:arantius
ID: 12241131
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 12241374
> (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
 
LVL 9

Expert Comment

by:keteracel
ID: 12242331
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
 
LVL 13

Expert Comment

by:davidlars99
ID: 12242693
> 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
 

Expert Comment

by:taranki
ID: 12245129
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
 

Author Comment

by:PaulB007
ID: 12246553
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

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

617 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question