Solved

Display Loading Message while image is loading

Posted on 2004-10-06
10
1,415 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
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
 
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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

746 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now