Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to add loading GIF to this JS function?

Posted on 2011-10-04
2
Medium Priority
?
426 Views
Last Modified: 2012-05-12
Hi,

I have this short JS function called 'init' that loads images from an array into a <div> one at a time, hiding them. It then creates a transparent sheet to go over the images for mouse events, and finally displays one of the images. I would like to have a loading gif play until the everything is done and the image is displayed. Would be grateful for any help on how to get this done -- thank you!
function init() {
  title = document.getElementById('title');
  sketchUpObj = document.getElementById('sketchUpObj');
  imageCount = imageFileNameArray.length;

  // load up the imageArray with the sketchUp images
  for (i = 0; i < imageCount; i++) {
    sketchUpImageArray[i] = new Image();
    sketchUpImageArray[i].src = imageFileNameArray[i];
    sketchUpImageArray[i].className = 'sketchUpImage';
    hide(sketchUpImageArray[i]);
    document.getElementById('sketchUpObj').appendChild(sketchUpImageArray[i]);
  }
//create a transparent sheet over the images so that the mouseevents go it it
  var sheet = document.createElement("DIV");
  document.getElementById('sketchUpObj').appendChild(sheet);
  sheet.id = "sheet";
  sheet.onmousemove = handleRotate;
  sheet.onmousedown = handleMouseDown;
  sheet.onmouseup = handleMouseUp;
  sheet.onmouseout = handleMouseUp;
  setOpacity(sheet, 0.0);

  currentPos = imageCount-1
  show(sketchUpImageArray[currentPos]);
}

Open in new window

0
Comment
Question by:andreyman3d2k
2 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 36914516
check this test page : http://jsfiddle.net/4K4Lb/


var imageFileNameArray = ["http://www.nfsource.net/files/images/12-03-11/SHIFT2_Unleashed_LOTUS_ELISE_111R_01.jpg", "http://www.nfsource.net/files/images/12-03-11/SHIFT2_Unleashed_LOTUS_ELISE_111R_02.jpg", "http://www.nfsource.net/files/images/12-03-11/SHIFT2_Unleashed_LOTUS_ELISE_111R_03.jpg"];
var c = 0;

function init() {
    title = document.getElementById('title');
    sketchUpObj = document.getElementById('sketchUpObj');
    imageCount = imageFileNameArray.length;
    for (i = 0; i < imageCount; i++) {
        var sketchUpImage = new Image();
        sketchUpImage.src = imageFileNameArray[i];
        sketchUpImage.className = 'sketchUpImage';
        sketchUpImage.onload = function() { 
            if(++c==1) this.style.display = "block";
            else if(c==imageFileNameArray.length) {
                document.getElementById("loading").style.display = "none";
                alert("all pics loaded!");
            }
        };
        //hide(sketchUpImageArray[i]);
        document.getElementById('sketchUpObj').appendChild(sketchUpImage);
    }
}

window.onload = function() {
    init();
}

Open in new window

0
 
LVL 6

Author Closing Comment

by:andreyman3d2k
ID: 37073591
Awesome help, thank you!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
By following these Magento e-commerce development tips, you can increase your website's conversion and profitability. Read this post for more details.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses

564 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