Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Display Loading Message while image is loading

Posted on 2004-10-06
10
Medium Priority
?
1,466 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 375 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
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…
Suggested Courses

963 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