Solved

Display Loading Message while image is loading

Posted on 2004-10-06
10
1,434 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

752 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